@Input binding
This is the documentation for Angular 6.
You can switch to the latest version Angular 10.
You can switch to the latest version Angular 10.
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;
}