[Angular Directive] 2. Add Inputs to Angular 2 Directives

The @Input decorator allows you to pass values into your @Directive so that you can change the value of the Directive each time that it is used. Using @Input makes your Directives much more flexible and reusable so they can adapt to many different situations.

import {Directive, Input, HostBinding} from ‘@angular/core‘;

@Directive({
  selector: ‘[getInput]‘
})
export class GetInputDirective {

  @Input(‘getInput‘) input;
  @HostBinding() get innerText() {
    return this.input;
  }
  constructor() {

  }

}

<span [getInput]="‘something‘">I am a span</span>

[getInput] means we have a prop on our directive call ‘getInput‘, go and find it and set the value as ‘something‘.

It will only show "something" on the page. Here we pass value to the directive, then reflect the input value to the Host element‘s innerText by using getter.