[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 ...
随机推荐
- ZOJ 3765 Lights （伸展树splay）
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3765 Lights Time Limit: 8 Seconds ...
- SIMATIC PID温度控制
SIMATIC PID温度控制 // VAR_INPUT ------------------------------------------------------------------- #if ...
- USBDM RS08/HCS08/HCS12/Coldfire V1,2,3,4/DSC/Kinetis Debugger and Programmer -- MC9S08JS16
Introduction The attached files provide a port of a combined TBDML/OSBDM code to a MC9S08JS16 proces ...
- STM32 USART 波特率计算
The baud rate for the receiver and transmitter (Rx and Tx) are both set to the same value as program ...
- 使用SIGALRM信号为阻塞操作设置超时
我们经常会遇到为阻塞操作设置超时的问题,比如说阻塞套接字read读取设置10秒超时,其中一个办法就是调用alarm函数,它在指定超时时期产生SIGALRM信号,使得阻塞操作中断. 但其弊端在于: 1. ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- 5日均线MACD
1.5日均线: 5日均线是股市术语,就是股票5天的成交价格或指数的平均值,所对应的是股价的5日均线和指数的5日均线(5MA).均线指标实际上是移动平均线指标的简称. 一般在K 线图中会有3 条或4 条 ...
- 【spring boot】spring boot 前台GET请求，传递时间类型的字符串，后台无法解析，报错：Failed to convert from type [java.lang.String] to type [java.util.Date]
spring boot 前台GET请求,传递时间类型的字符串,后台无法解析,报错:Failed to convert from type [java.lang.String] to type [jav ...
- win7设置电脑锁屏时间
方法/步骤 1 小编用的win7电脑,进入控制面板先~ 2 选择系统与安全选项. 3 如图所示,箭头所指,可以设置锁屏时间,不过电源选项中还有个设置开启屏幕输入密码的设置,第一个就是. 4 如图所示, ...
- IntelliJ IDEA2018.1、2017.3激活
IntelliJ IDEA2018.1.2017.3破解教程 http://idea.java.sx/ 简单快捷!! ———————————————————————————————————————— ...