String interpolation in 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.