Using @HostBinding and @HostListener in Custom Angular Directives

原文：https://www.digitalocean.com/community/tutorials/angular-hostbinding-hostlistener

------------------------------------------------------------------------------------------------------------------------------------------

Angular

• By Alligator.io

  PostedMay 4, 2017 198.6kviews

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

@HostBinding and @HostListener are two decorators in Angular that can be really useful in custom directives. @HostBinding lets you set properties on the element or component that hosts the directive, and @HostListener lets you listen for events on the host element or component.

Both decorators are very straightforward to use. Let’s see how to use them with an example directive that listen’s for a keydown event on the host and sets its text and border color to a random color from a set of a few available colors:

rainbow.directive.ts

import {
  Directive,
  HostBinding,
  HostListener } from '@angular/core';

@Directive({
  selector: '[appRainbow]'
})
export class RainbowDirective {
  possibleColors = [
    'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff',
    'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'
  ];
  @HostBinding('style.color') color: string;
  @HostBinding('style.border-color') borderColor: string;
  @HostListener('keydown') newColor() {
    const colorPick = Math.floor(Math.random() * this.possibleColors.length);
this.color = this.borderColor = this.possibleColors[colorPick];

Copy

And the directive can be used on elements like this:

<input type="text" appRainbow>

Copy

Our Rainbow directive uses two @HostBinding decorators to define two class members, one that’s attached to the host’s style.color binding and the other to style.border-color.

You can also bind to any class, property or attribute of the host. Here are a few more examples of possible bindings:

• @HostBinding(‘class.active’)
• @HostBinding('disabled’)
• @HostBinding('attr.role’)

The @HostListner with the 'keydown' argument listens for the keydown event on the host. We define a function attached to this decorator that changes the value of color and borderColor, and our changes get reflected on the host automatically.

Below is our directive in action