Angular’s [disabled] binding seems to work with true or false

Angular’s [disabled] binding seems to work with true or false

In html, disabled means disabled, but in Angular’s property binding, if the variable is true or false, it will toggle between enabled and disabled.

[disabled]='variable name'

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:
  `
  <div style="text-align:center">
    <input type="text" maxlength="8" [disabled]="aaa" value="テキスト"><br>
    <button type="button" (click)="onClick()">ボタン</button>
  </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  aaa = false;
  onClick() {
    this.aaa = !this.aaa;
  }
}

The variable called aaa is toggled between true and false by pressing the button.

高橋