Angular 中的字符串插值

Question

My app.component.ts code:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  isDisabled = false;

  ngOnInit(): void {
    setTimeout(() => {
      this.isDisabled = !this.isDisabled;
    }, 2000);
  }
}

My app.component.html code:

<input type="text" value="{{ isDisabled }}" disabled="{{ isDisabled }}" />

• The string interpolation for the disabled attribute is evaluated to a truthy value (thus, making the input disabled from the get-go)
• The string interpolation for the value attribute is evaluated to false initially and just after the callback of the setTimeout is executed, the value attribute of the input is true . (this is the behavior I expected for the disabled attribute also)

Q: What's causing the difference in the way these two string interpolations work?

Answer 1

disabled will disable an element whether it is true or false, it's presence means that the element will be disabled.
Angular will not add the disabled element at all for [disabled]="variable" if variable is false.