With Angular 2, we can easily bind to each DOM property. For example, let's bind a value to the disabled
property of a button and initialize it to be true
:
@Component({ selector: 'app-root', template: ` <button [disabled]="isDisabled">You can't click me!</button> ` }) export class AppComponent { private isDisabled: boolean; constructor() { this.isDisabled = true; } }
This is true to any property. Let's see another example, this time with an input element:
@Component({ selector: 'app-root', template: ` <input [type]="inputType" [placeholder]="placeHolderText"> ` }) export class AppComponent { private placeHolderText: string; private inputType: string; private inputClass: string; constructor() { this.placeHolderText = 'type your password...' this.inputType = 'password'; } }