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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
