[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 ...
随机推荐
- TCP套接字端口复用SO_REUSEADDR
下面建立的套接字都是tcp套接字 1.进程创建监听套接字socket1,邦定一个指定端口,并接受了若干连接.那么进程创建另外一个套接口socket2,并试图邦定同一个端口时候,bind错误返回“Add ...
- Win10正式版开机慢怎么办 开机黑屏时间长怎么办
升级Win10正式版后开机速度慢.黑屏时间长怎么解决呢?其实我重要是由Win10正式版所提供的“快速启动”功能与电脑显卡驱动.电源管理驱动不兼容所造成的.下面就与大家分享一下针对Win10正式版开机速 ...
- chrome主页被hao123篡改，怎么改回来？
这两天因为下载个别小程序又把我的chrome的主页给篡改了,由于我现在使用的是任务栏快捷方式,没法右键属性,但我想应该和桌面快捷方式是一个道理,于是我找到任务栏文件夹C:\Users\Administ ...
- 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片
在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...
- C#编程（四十六）----------正则表达式
正则表达式 1.定义一个Regex类的实例 Regex regex=new Regex(“”); 这里初始化参数就是一个正则表达式,”\d”表示配置数字 2.判断是否匹配 判断一个字符串,是否匹配一个 ...
- Informix 常用函数
一.内部函数 1.内部合计函数 1)COUNT(*) 返回行数 2)COUNT(DISTINCT COLNAME) 返回指定列中唯一值的个数 3)SUM(COLNAME/EXPRESSION) 返回指 ...
- 错误：不小心的VS重命名
问题再现 不小心勾选了“在字符串中搜索”.
- git push.default设置
转自:http://blog.csdn.net/daijingxin/article/details/51326715 在进行一次空仓库的提交时,我遇到了这个警告 警告如下: warning: pus ...
- PHP开发微信被动回复消息遇到的大坑
最近开始做CMS后台与微信公众号的整合,在做被动回复消息时,按照官方文档的XML格式回复消息,总是提示"该公众号提供的服务出现故障,请稍后再试".但是通过微信提供的接口调试工具看我 ...
- Asp.Net Mvc Action过滤器（二）
在Mvc中为Action添加过滤器,有两种方式, 一.使用ActionFilterAttribute,简单方式,同时支持Result的过滤处理, 1.可以为空,支持的重写:OnActionExecut ...