Handling events in directives

Directives are so flexible that they allow you to apply different states, based on events triggered by the user. For instance, we can add a hover behavior to the button where a different color (say black) is applied to the button when the mouse cursor moves over the button:

import {   Directive,   ElementRef,   HostListener } from '@angular/core';@Directive({  selector: '[appUiButton]'})export class UiButtonDirective {  constructor(private el: ElementRef) {    Object.assign(el.nativeElement.style, {      backgroundColor: '#ff00a6',      ...    })  }  @HostListener('mouseenter') onMouseEnter() {    this.el.nativeElement.style.backgroundColor = '#000';  }   @HostListener('mouseleave') onMouseLeave() { this.el.nativeElement.style.backgroundColor ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.