[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 ...
随机推荐
- C#Winform将WebBowser控件替换为Chrome内核
摘要 由于最近要做一个浏览器式的软件,其中有不少地方需要使用到jQuery和BootStrap,但是在C#中,默认的WebBrowser控件默认使用的是IE的core,而低版本的IE在JS加载上总是容 ...
- setInterval设置停止和循环
原文链接:http://caibaojian.com/setinterval-times.html 需要知道已经经过了多少次或者说过多久就会停止 var timesRun = 0; var inter ...
- 《Go学习笔记 . 雨痕》方法
一.定义 方法 是与对象实例绑定的特殊函数. 方法 是面向对象编程的基本概念,用于维护和展示对象的自身状态.对象是内敛的,每个实例都有各自不同的独立特征,以 属性 和 方法 来暴露对外通信接口.普通函 ...
- 谢宝友 LINUX 内核专家-----LINUX内核注释
http://download.csdn.net/user/xiebaoyou http://blog.chinaunix.net/uid/25845340.html
- iOS关于error can't allocate region的一点发现
调试的时候出现error can't allocate region错误,后来去搜了下网上关于这个错误的帖子,是这么说的:error can't allocate region 程序运行报错,在xco ...
- C#编程（四十五）----------格式字符串
格式字符串 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) 案例: string str=string.Format("{0:C}",0.2); ...
- 11i and R12 Table Count in Different Module
Advertisement Module 11i Tables R12 Tables New Tables AR 551 616 118 BOM 264 337 73 GL 186 309 140 A ...
- ORACLE数据库导入的时候出现IMP-00038: 无法转换为环境字符集句柄
数据泵不一致导致的,比如说你用expdp导出来的 用imp导入的时候就会出现这个错误exp导出来的用imp导入expbd导出来的用impdp导入和版本没有关系
- arcgispro字段计算器
使用python语法 在python中没有类似sub()或者subString()的方法,但是字符串的截取操作却是更加简单. 只需要把字符串看作是一个字符数组,截取子串非常方便. 多余的话就不啰嗦了, ...
- String Matching（poj1580）
/*String Matching Description It's easy to tell if two words are identical - just check the letters. ...