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

user_7088848 0
Viewed 68987

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

html

<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}}
        </div>
    </div>
</div>

typescript

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.

ngfor angular typescript
7 Answers

Use it this way:

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

Same is for readonly.

user_45249890

CSS

.disabled-contenct {
  pointer-events: none;
  opacity: 0.4;
}

HTML

<div [class.disabled-contenct]="!isDisabledContent"></div>

TS

isDisabledContent: boolean;

then you can toggle isDisabledContent any time.

user_65125650

Attribute directive will surely help you for disabling or enabling div or any other HTML element and it’s child elements.

DisableDirective

First, create an attribute directive that will take one parameter (appDisable)as input. It will disable/enable DOM elements and their child DOM elements based on the input.

import { AfterViewInit, Directive, ElementRef, Input, OnChanges, Renderer2 } from '@angular/core';

const DISABLED = 'disabled';
const APP_DISABLED = 'app-disabled';
const TAB_INDEX = 'tabindex';
const TAG_ANCHOR = 'a';

@Directive({
  selector: '[appDisable]'
})
export class DisableDirective implements OnChanges, AfterViewInit {

  @Input() appDisable = true;

  constructor(private eleRef: ElementRef, private renderer: Renderer2) { }

  ngOnChanges() {
    this.disableElement(this.eleRef.nativeElement);
  }

  ngAfterViewInit() {
    this.disableElement(this.eleRef.nativeElement);
  }

  private disableElement(element: any) {
    if (this.appDisable) {
      if (!element.hasAttribute(DISABLED)) {
        this.renderer.setAttribute(element, APP_DISABLED, '');
        this.renderer.setAttribute(element, DISABLED, 'true');

        // disabling anchor tab keyboard event
        if (element.tagName.toLowerCase() === TAG_ANCHOR) {
          this.renderer.setAttribute(element, TAB_INDEX, '-1');
        }
      }
    } else {
      if (element.hasAttribute(APP_DISABLED)) {
        if (element.getAttribute('disabled') !== '') {
          element.removeAttribute(DISABLED);
        }
        element.removeAttribute(APP_DISABLED);
        if (element.tagName.toLowerCase() === TAG_ANCHOR) {
          element.removeAttribute(TAB_INDEX);
        }
      }
    }
    if (element.children) {
      for (let ele of element.children) {
        this.disableElement(ele);
      }
    }
  }
}

Do not forget to register DisableDirective in the AppModule

How to use the directive in the component?
Pass the boolean value (true/false) in the directive from the component.

<div class="container" [appDisable]="true">
</div>

You can refer the complete Post HERE

Running example on Stackblitz

user_81481040
user_99535500
Related