Testing a directive

The directive decorator in Angular is used to decorate a class that has the responsibility of extending components in the DOM, based on the defined methods and logic.

Take this directive that changes the background, for example:

import { Directive, HostBinding, HostListener } from '@angular/core';@Directive({  selector: '[appBackgroundChanger]'})export class BackgroundChangerDirective {  @HostBinding('style.background-color') backgroundColor: string;  @HostListener('mouseover') onHover() {    this.backgroundColor = 'red';  }  @HostListener('mouseout') onLeave() {    this.backgroundColor = 'inherit';  }}

We will be making use of an attribute directive, logClicks, which logs the number of clicks on the host element.

Let's create a ...

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.