@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:

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];

And the directive can be used on elements like this:

<input type="text" appRainbow>

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