[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 ...
随机推荐
- securecrt中文乱码以及ubuntu设置locale
参考文献 http://wiki.ubuntu.org.cn/%E4%BF%AE%E6%94%B9locale http://www.bootf.com/547.html 强烈建议 ubuntu下面不 ...
- 如何用visio（word）绘制图片表格
1.用visio是插入excel表格,但是不能差如公示了,修改的话也是进入了excel修改. 2.在word里修改即可,word表格可以插入公式,然后阿银玉兰或者转给pdf截图就好
- 向OSG视图Viewer发送消息
句柄是以下面的方式传递给osgViewer::Viewer的,osgViewer::View.getCamera().setGraphicsContext(osg::GraphicsContext); ...
- MySQL查询报错 ERROR: No query specified
今天1网友,查询报错ERROR: No query specified,随后它发来截图. root case:查询语法错误 \G后面不能再加分号;,由于\G在功能上等同于;,假设加了分号,那么就是;; ...
- Android的学习之路（三）项目的启动过程和安装过程具体解释
应用的安装和启动过程: 安装:第一步:java的编译器会把这个.java文件编译成.class文件 第二部:Android的SDK提供了一个dx工具,这个工具把.class文件转义 ...
- iPhone开发过程中调试多次Release问题 message sent to deallocated
初级:第一步 为程序添加符号断点 malloc_error_break 方法如下. 目标效果:让程序崩溃时跳转到出错到那一行.但是往往达不到这个效果.不行就继续往下看. At times, wh ...
- Swift - 添加纯净的Alamofire
Swift - 添加纯净的Alamofire 如果你有代码洁癖,不能容忍任何多余的东西,请继续往下看. . 下载Alamofire (https://github.com/Alamofire/Ala ...
- SEO如何利用百度知道日引流上千IP
个人小站长.SEO们经常为网站没有流量而发愁,一个没有流量的网站就像一个不喝水的人,迟早得死.没有流量,就没有PV,也就是说你的网站只是 给你一个人看的,那做站有什么意义呢?网站上所发布的内容都是分享 ...
- JQuery攻略（一） 基础知识——选择器 与 DOM
JQuery是功能丰富的Javascript库,可以帮助用户毫不费力地把动态功能应用到网页. JQuery具有许多强大的功能,包括访问部分网页,快速修改网页内容,添加动画,应用AJAX技术等等. 正因 ...
- Android之录音工具类
/** * 录音工具类 * * @author rendongwei * */ public class RecordUtil { private static final int SAMPLE_RA ...