In a real world scenario we obviously need to be able to communicate with an Angular Element embedded into our static HTML site. In this lesson we will learn how we can pass data into a Custom Element and how we can register to an Angular Element’s output in the form of custom events.
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
// selector: 'do-greet',
template: `
<div>Hi, {{ name }}!</div>
<button (click)="doGreet()">Greet</button>
`,
styles: []
})
export class GreeterComponent implements OnInit {
@Input() name;
@Output() greet = new EventEmitter();
constructor() {}
doGreet() {
this.greet.emit(`Hi, ${this.name}`);
}
ngOnInit() {}
}
Listening for the events:
<html> <body> <do-greet name="Juri"></do-greet> <script src="./polyfills.js"></script> <script src="./ngelements.js"></script> <script> const el = document.querySelector('do-greet'); el.addEventListener('greet', ev => { alert(ev.detail); // get the event output from 'detial' }); </script> </body> </html>