[Angular] Communicate with Angular Elements using Inputs and Events

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>
复制代码

 

posted @   Zhentiw  阅读(180)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2018-03-19 [Ionic] Align and Size Text with Ionic CSS Utilities
2017-03-19 [React Router v4] Use the React Router v4 Link Component for Navigation Between Routes
2017-03-19 [React Router v4] Create Basic Routes with the React Router v4 BrowserRouter
2015-03-19 [Javascript] Drawing Styles on HTML5 Canvas
2015-03-19 [Javascript] Drawing Paths - Curves and Arcs
2015-03-19 [Javascript] Drawing Paths - Lines and Rectangles
2015-03-19 [Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript
点击右上角即可分享
微信分享提示
AI IDE Trae