@Input binding

An Input property is a settable property annotated with an @Input decorator. Values flow into the property when it is data bound with a property binding.

@Input() testInput: string;

Setting a property of a directive (the same mechanic for components):

Source

app.component.html

<button clickAlert [message]="alertMessage">Click me!</button>

app.component.ts

export class AppComponent {
  alertMessage = 'Hi, there.';
}

click-alert.directive.ts

@Directive({
  selector: '[clickAlert]',
})
export class ClickAlertDirective {
  @Input message: string;

  @HostListener('click') clickHandler() {
    alert(this.message);
  }
}

Result

Alternatively, you can identify members in the inputs array of the directive metadata:

@Directive({
  ...
  inputs: ['message'],
})
export class ClickAlertDirective {
  message: string;
}