Trigger angular method from polymer template

Question

Polymer template

  Sample.html
       <dom-module id="sample">
           <template>
           <paper-button id="clickme" on-click=         
                                "clickMe()">click</paper-button>
            </template>
       </dom-module>

 sample.ts
       export class sample controller{
             clickMe(){
                 console.log("button clicked from polymer app");
               }
          }

I can able to pass the data from angular app to polymer component.Is there any way to trigger the angular event from polymer component.

Answer 1

Dispatch events from Polymer with the data you need and listen for them in Angular.

Polymer:

<dom-module id="sample-element">
  <template>
    <paper-button on-click="clickMe">click</paper-button>
  </template>
  <script>
    Polymer({
      is: 'sample-element',
      clickMe: function() {
        this.dispatchEvent(new CustomEvent('sample-element-data', {
          detail: 'Hello from Polymer'
        });
      }
    });
  </script>
</dom-module>

Angular:

@Component({
  template: '<sample-element (sample-element-data)="handleEvent($event)"></sample-element>'
})
export class SampleAngularComponent {
  handleEvent(e: CustomEvent) {
    console.log(e.detail); // 'Hello from Polymer'
  }
}