Angular 2+ Attr.disabled Is Not Working For Div When I Try To Iterate NgFor Loop

Answer :

Use [disabled] instead of [attr.disabled]

This is because [attr.disabled]="false" will add disabled="false" to the element which in html, will still disable the element

Syntax that will not disable an element

<button>Not Disabled</button> <button [disabled]="false">Not Disabled</button> 

Syntax that will disable an element

<button disabled></button> <button disabled="true"></button> <button disabled="false"></button> <button [attr.disabled]="true"></button> <button [attr.disabled]="false"></button> <button [disabled]="true"></button> 

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.

As you mentioned in your comment, you are using div elements and not buttons, which angular 2 doesn't recognise the disabled element of. I would recommend using a button if you are going to be capturing click events but if not you could do something like:

<div [ngClass]="{ 'disabled': item.status }"></div> 

and have a CSS class to show the time slot as booked.

More information on [ngClass] is available in the documentation

Disabled cannot be used for a div element and only applied to the below elements

<button>     <fieldset>   <input>  <keygen>     <optgroup>   <option>     <select>     <textarea>   

See this

So for your issue, you can handle it by using:

<div    class="choice"    data-toggle="wizard-slot"    [class.disabled]="item.status"    (click)="slotSelected($event)">   <input      type="radio"      name="slot"      value="{{item.timeSlot}}"      [disabled]="item.status">   <span class="icon">{{item.timeSlot}}</span> {{item.status}} </div> 

and you should be adding styles

.disabled {   cursor: not-allowed; } 

Use it this way:

[attr.disabled]="isDisabled ? '' : null" 

Same is for readonly.