How do I disable an HTML element with Angular ?

Set the disabled attribute to the result of an expression and Angular will disable / enable the element for you as needed.

Disable an HTML Element – Example # 1

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

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html'
})
export class HomeComponent {
  count: number = 0;
  buttonDisabled: boolean = false;
}

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

@Component({

selector: 'home',

templateUrl: 'src/home/home.html'

})

export class HomeComponent {

count: number = 0;

buttonDisabled: boolean = false;

}

In example # 1, we have our component. There are two properties we are interested in: count and buttonDisabled. We will leverage these in our template.

Disable an HTML Element – Example # 2

<!-- disable the button -->
<button>
Disable Button
</button>

<!-- enable the button -->
<button>
Enable Button
</button>

<!-- the target button -->
<button disabled="disabled">
I've been clicked {{count}} times.
</button>

Disable Button

</button>

Enable Button

</button>

I've been clicked {{count}} times.

</button>

In example # 2, we have our template. There are three buttons. The first two buttons toggle each other. That is to say, when the first button is clicked it is destroyed, and the second button is created. Conversely, when the second button is clicked, it is destroyed and the first button is created. All of this happens because each button has an ngIf attribute. That attribute is watching for the value of the buttonDisabled property. Also, each button has a click attribute. In each case, clicking the button updates the value of the buttonDisabled property.

Important note: these two buttons are for demonstration purposes only. The focus of this article is the Angular [disabled] attribute.

Next, take a look at the third button. It has a disabled attribute. That attribute is set to toggle based on the buttonDisabled property. So when the buttonDisabled property is true, that third button is disabled. And when the buttonDisabled property is false, the third button is not disabled.

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/kcv-angular-disabled-attribute