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?

Ardit · Accepted Answer · 2022-08-02 14:37:26Z

2

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.

answered Aug 2, 2022 at 14:37

Ardit

3915 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

String interpolation in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related