Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Paper-radio-group disappears after selection when used in angular 2 #64

Open
8 tasks done
JCofman opened this issue Jul 29, 2016 · 1 comment
Open
8 tasks done

Paper-radio-group disappears after selection when used in angular 2 #64

JCofman opened this issue Jul 29, 2016 · 1 comment

Comments

@JCofman
Copy link

JCofman commented Jul 29, 2016

Description

I try to use paper-radio-group element in an angular 2 application but when I place the paper-radio-group in an angular 2 component the element does not work as expected.

The selected paper-radio-buttons disappears after selection inside the paper-radio-group element.

Expected outcome

Paper-radio group should not disappear after selection. And the default selected element should get selected.

Actual outcome

After I select a paper-radio-button inside the paper-radio-group all paper-radio-buttons disappear inside the paper-radio-group.

Steps to reproduce

  1. clone angular 2 quickstart project https://github.com/angular/quickstart/blob/master/README.md
  2. install paper-radio-group and paper-radio-button

bower install --save PolymerElements/paper-radio-button

bower install --save PolymerElements/paper-radio-button-group

  1. Add paper elements in index html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
      <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">
    <link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html">
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
    window.addEventListener('WebComponentsReady', function() {
      System.import('app').catch(function(err){ console.error(err); });
       });
    </script>

  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
  1. add paper-radio-group inside the my-app component
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<paper-radio-group selected="Small">
    <paper-radio-button name="small">Small</paper-radio-button>
    <paper-radio-button name="medium">Medium</paper-radio-button>
    <paper-radio-button name="large">Large</paper-radio-button>
    </paper-radio-group>

    `
})
export class AppComponent { }

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10
@hcorazao
Copy link

Exactly the same thing is happening to me. I'm having a lot of problems integrating angular 2 with polymer elements even though i'm using a special connector https://github.com/vaadin/angular2-polymer). If someone can fix that mistake it would be great

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JCofman @hcorazao