[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>
[Angular] Communicate with Angular Elements using Inputs and Events的更多相关文章
- Angular 1与 Angular 2之间的一些差别
现在在用ng1.5.8做一个项目,ng的优点和特性我就不用多说了,ng1在陆续更新到1.5/1.6后就没再推出新版本了,ng2已经面世测试很久了,如同很多系统和框架一样,每个大的版本更新都会有新特性加 ...
- AngularJs angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- angular.js 的angular.copy 、 angular.extend 、 angular.merge
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Angular - - angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- 使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- Angular 学习笔记 (Angular 9 & ivy)
refer : https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde47 ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
- 【Angular】关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep
[Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not ...
随机推荐
- LPC43XX TQFP144 IO Pinout
- Snmp学习总结(三)——Win7安装和配置SNMP
一.安装SNMP Win7操作系统默认情况下是不安装SNMP服务的,今天讲解一下在Win7操作系统下安装SNMP,具体安装步骤如下: WIN7操作系统下安装SNMP的步骤如下: 开始安装SNMP
- 解决ubuntu上在androidstudio中启动emulator闪退的问题（2）
平台 Ubuntu14.04 64 现象 在AndrodStudio中点击模拟器的启动按钮后,模拟器界面弹出后,又立刻闪退. 解决 一.查看模拟器的信息 从上面可以看到模拟器的存放路径以及名称: 路径 ...
- AutoMapper在MVC中的运用06-一次性定义映射、复杂类型属性映射
本篇AutoMapper使用场景: ※ 当源和目标具有同名的复杂类型属性.集合类型属性,这2种属性对应的类间也需建立映射 ※ 一次性定义好源和目标的所有映射 ※ 一次性定义好源和目标的所有映射,目标中 ...
- indy10的idhttpServer应答字符串
indy10的idhttpServer应答字符串 先看应答字符串的代码: procedure TIdIOHandler.Write(const AOut: string; AByteEncoding: ...
- Download Hacking Team Database from torrent using magnet link
20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送) 国内私募机构九鼎控股打造,九鼎投资是在全国股 ...
- DotNetty的通道处理细节
第一,客户端如何向服务器主动发送消息: 第二,服务器如何向指定客户端发送消息: 第三,在哪里做报文的拆包和组包. public partial class FrmMain : Form { publi ...
- LinkedList、Stack、Queue、PriorityQueue的总结
1.这几种容器的特点 都是按照顺序来存储元素. 取元素的时候的不同点: LinkedList:按照下标随意取元素 Stack:后进先出取元素 Queue:先进先出取元素 PriorityQueue:按 ...
- 破产姐妹第六季/全集2 Broke Girls迅雷下载
英文全名2 Broke Girls,第6季(2016)CBS. 本季看点:<破产姐妹>第五季季终集达到了收视人数699万收视率1.7.在第五季终集,两姐妹发现Han(马修·摩伊 饰)的生活 ...
- Orchard模块开发全接触8：改造后台
后台默认提供了 Content 的管理,但是,所有的内容类型揉杂在一起,而我们需要更深度的定制一些功能,比如,我们只想管理订单,又比如,我们需要对注册用户进行管理.本篇的内容包括: 1:自定义 adm ...