[Angular Directive] 3. Handle Events with Angular 2 Directives
Angular with directive handle Events directives
2023-09-14 09:00:52 时间
A @Directive
can also listen to events on their host element using @HostListener
. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component.
import {Directive, HostListener, HostBinding, Input} from '@angular/core'; @Directive({ selector: '[clickable]' }) export class ClickableDirective { @Input('clickable') text; @HostBinding() get innerText() { if(this.text) { return this.text; } } @HostListener('click', ['$event']) onClick(event) { console.log(event); //MouseEvent this.text = event.clientX; } }
We can add HostListener on the host element, and get '$event' pass to our handler function 'onClick'. Inside the function we are able to change the innerText of the directive.
相关文章
- Angular报错
- [ngx-formly] Dynamically set Model Properties with Angular Formly Expressions
- [Angular] How to get Store state in ngrx Effect
- [Angular & Unit Testing] Testing Component with Store
- [Angular] Angular Global Keyboard Handling With EventManager
- [Angular] @ContentChild with Directive ref
- [Angular] Content Projection with ng-content
- [Angular Directive] Implement Structural Directive Data Binding with Context in Angular
- [Angular 2] Controlling how Styles are Shared with View Encapsulation
- [Angular-Scaled web] 3. Basic State with ui-router
- [AngularJS] Angular 1.3 ngMessages with ngAnimate
- [Angular] oc.lazyLoad with Angular ui router
- [AngularJS] Using the LocalForage library for offline storage with Angular
- [Angular] Isolate Scope .2
- [Angular] Progress HTTP Events with 'HttpRequest'
- [Angular] Reactive Store and AngularFire Observables
- [Angular2 Router] Use Params from Angular 2 Routes Inside of Components
- [Angular 2] Controlling how Styles are Shared with View Encapsulation
- [AngularJS] Angular 1.3 Anuglar hint
- Angular 应用要启用 Service Worker 所需满足的一些前提条件
- 最简单的Angular Route hello world场景都跑不通的一个原因
- Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
- Angular Universal 学习笔记 - 客户端渲染和服务器端渲染的区别
- 每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
- Angular双向绑定的一个例子
- Angular应用的入口