[Fixed] Angular 2+ attr.disabled is not working for div when I try to iterate ngFor loop


I’m working on a appointment booking app, where I’m displaying time slots for appointments using *ngFor to loop.


<div *ngFor="let item of allTimeSlots">
    <div class="col-sm-3">
        <div class="choice" data-toggle="wizard-slot" [attr.disabled]="item.status" (click)="slotSelected($event)">
            <input type="radio" name="slot" value="{{item.timeSlot}}">
            <span class="icon">{{item.timeSlot}}</span> {{item.status}}


for (var index = 0; index < this.totalMinutes; index += 15, i++) {
  this.allTimeSlots[i] = new allTimeSlots("", false);

  this.allTimeSlots[i].timeSlot = (hour <= 12 ? hour : hour - 12) + ":" + (minute <= 9 ? ("0" + minute) : minute) + " " + ampm;
  this.bookedTimeSlots.forEach(element => {
    if (this.allTimeSlots[i].timeSlot == element) {
      this.allTimeSlots[i].status = true;

Here’s screen shot of time slots which displays true if the time slot is booked and false if available for debugging purpose.
enter image description here

When I run this code it doesn’t throw any error but all the div elements created by *ngFor are disabled. I tried to use *ngIf instead of disabled, it works pretty well. But the problem is I want to display whether the time slot is available or not.


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


See this

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

  <span class="icon">{{item.timeSlot}}</span> {{item.status}}

and you should be adding styles

.disabled {
  cursor: not-allowed;

Leave a Reply

(*) Required, Your email will not be published