Angular 2+ attr.disabled is not working for div when I try to iterate ngFor loop
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.