@Input binding
@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;
}