[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 ...
随机推荐
- delphi TOnFormVisibleChangeEvent 事件应用
TGQIFileMgrForm = class(TForm) 定义 property OnVisibleChange: TOnFormVisibleChangeEvent read FOnVisibl ...
- ZServer4D开源项目
ZServer4D开源项目 ZServer4D 是一套从商业项目剥离而出的云服务器中间件,可以承载百万级的分布式负载服务,并且支持IoT及内网穿透. 作者将它开源了 https://github.co ...
- AndroidStudio工具将Module项目导出成Jar和arr库
原文:http://blog.csdn.net/liulei823581722/article/details/52919697 该篇首先讲述利用AndroidStudio如何把一个module项目导 ...
- ANDROID DisplayManager 服务解析一
from://http://blog.csdn.net/goohong/article/details/8536102 http://www.tuicool.com/articles/FJVFnu A ...
- android 读取 raw 中的文件。
file.getParentFile().mkdir(); file.createNewFile(); InputStream inputStream = context.getResources() ...
- Git：一本书 + 一个站点，让你掌握 Git
一本书:<<Pro Git in Chinese>> 一个网站:http://pcottle.github.io/learnGitBranching/
- Git：配置
概念 一般在新的系统上,我们都需要先配置下自己的Git 工作环境.配置工作只需一次,以后升级时还会沿用现在的配置.当然,如果需要,你随时可以用相同的命令修改已有的配置. Git 提供了一个叫做git ...
- 如何在SpringMVC中获取request对象
1.注解法 @Autowired private HttpServletRequest request; <listener> <listener-class> org.spr ...
- Android之TextView部分颜色变动
public class StringHandleExampleActivity extends Activity { /** Called when the activity is first cr ...
- Java类加载机制的理解
算上大学,尽管接触Java已经有4年时间并对基本的API算得上熟练应用,但是依旧觉得自己对于Java的特性依然是一知半解.要成为优秀的Java开发人员,需要深入了解Java平台的工作方式,其中类加载机 ...