The disabled attribute in Angular 2+ does not seem to work for a div element when attempting to loop through ngFor

Question

The disabled attribute in Angular 2+ does not seem to work for a div element when attempting to loop through ngFor

I am currently developing an appointment booking application that showcases time slots for appointments by utilizing the *ngFor 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;
    }
  });
}

Attached is a screenshot illustrating time slots, where 'true' indicates a booked slot and 'false' indicates availability for debugging purposes. https://i.sstatic.net/iGjrd.png

Although my code runs without errors, all div elements generated by *ngFor appear disabled. I attempted using *ngIf instead of disabled, which resolved the issue. However, I aim to show the availability status of time slots.

angular typescript ngfor

Answer 1

Answer №1

Here is the recommended usage:

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

This also applies to readonly.

Answer 2

Here is the recommended usage:

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

This also applies to readonly.

Answer 3

Answer №2

When you want to disable an element, use [disabled] instead of [attr.disabled]

This is important because using [attr.disabled]="false" will still result in the element being disabled since it adds disabled="false" to the element.

Examples of Syntax that Will Not Disable an Element

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

Examples of 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>

The presence of the disabled attribute will always disable an element, regardless of whether its value is true or false. Angular won't include the disabled attribute at all if you use [disabled]="variable" and variable is set to false.

If you are not using buttons but div elements which Angular 2 doesn't recognize the disabled attribute for, you can work around this by using [ngClass] like so:

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

You can then style the element based on its status in CSS to indicate if a time slot is booked or not.

For more details on [ngClass], refer to the official documentation

Answer 4

When you want to disable an element, use [disabled] instead of [attr.disabled]

This is important because using [attr.disabled]="false" will still result in the element being disabled since it adds disabled="false" to the element.

Examples of Syntax that Will Not Disable an Element

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

Examples of 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>

The presence of the disabled attribute will always disable an element, regardless of whether its value is true or false. Angular won't include the disabled attribute at all if you use [disabled]="variable" and variable is set to false.

If you are not using buttons but div elements which Angular 2 doesn't recognize the disabled attribute for, you can work around this by using [ngClass] like so:

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

You can then style the element based on its status in CSS to indicate if a time slot is booked or not.

For more details on [ngClass], refer to the official documentation

Answer 5

Answer №3

To clarify, the "disabled" attribute cannot be used for a div element. It is only valid for the following elements:

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

More information can be found here

If you need to address this issue, you can implement the following solution:

<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>

Additionally, don't forget to add the necessary styles:

.disabled {
  cursor: not-allowed;
}

Answer 6

To clarify, the "disabled" attribute cannot be used for a div element. It is only valid for the following elements:

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

More information can be found here

If you need to address this issue, you can implement the following solution:

<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>

Additionally, don't forget to add the necessary styles:

.disabled {
  cursor: not-allowed;
}

Answer 7

Answer №4

CSS

.inactive-element {
  pointer-events: none;
  opacity: 0.4;
}

HTML

<div [class.inactive-element]="!isElementActive"></div>

TS

isElementActive: boolean;

You have the ability to change the status of isElementActive at any point.

Answer 8

CSS

.inactive-element {
  pointer-events: none;
  opacity: 0.4;
}

HTML

<div [class.inactive-element]="!isElementActive"></div>

TS

isElementActive: boolean;

You have the ability to change the status of isElementActive at any point.

Answer 9

Answer №5

As advised by 0mpurdy, it is recommended to utilize the [disabled] attribute. The variable itself does not necessarily need to be a boolean, but the expression should be.

In your particular scenario, it checks whether item.status evaluates to false or true. Therefore, if it's not null/NaN/undefined, the result will be "true" and consequently the div will be disabled.

Consider incorporating this expression instead:

[disabled]="item.status === 'occupied'"

Update

I apologize for overlooking that detail. Given that you cannot disable a div, insert the disabled attribute within the input tag.

<input type="radio" [disabled]="item.status === 'occupied'" name="slot" value="{{item.timeSlot}}">

Since you desire to exhibit the selection as disabled, it's necessary to place it directly inside the input. This way, the radio button will be unclickable and a 'cursor: not-allowed' will be displayed.

I trust this information proves helpful.

Answer 10

As advised by 0mpurdy, it is recommended to utilize the [disabled] attribute. The variable itself does not necessarily need to be a boolean, but the expression should be.

In your particular scenario, it checks whether item.status evaluates to false or true. Therefore, if it's not null/NaN/undefined, the result will be "true" and consequently the div will be disabled.

Consider incorporating this expression instead:

[disabled]="item.status === 'occupied'"

Update

I apologize for overlooking that detail. Given that you cannot disable a div, insert the disabled attribute within the input tag.

<input type="radio" [disabled]="item.status === 'occupied'" name="slot" value="{{item.timeSlot}}">

Since you desire to exhibit the selection as disabled, it's necessary to place it directly inside the input. This way, the radio button will be unclickable and a 'cursor: not-allowed' will be displayed.

I trust this information proves helpful.

Answer 11

Answer №6

Using an attribute directive can be very helpful when it comes to disabling or enabling a div or any other HTML element along with its child elements.

DisableDirective

To start, create an attribute directive that accepts a parameter (appDisable) as input. This directive will allow you to disable or enable DOM elements and their respective child elements based on the provided 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 tag 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);
      }
    }
  }
}

Remember to register the DisableDirective in the AppModule

How to implement the directive in your component?
Simply pass a boolean value (true/false) in the directive from the component.

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

You can find more information in the complete post HERE

See a live example on Stackblitz

Answer 12

Using an attribute directive can be very helpful when it comes to disabling or enabling a div or any other HTML element along with its child elements.

DisableDirective

To start, create an attribute directive that accepts a parameter (appDisable) as input. This directive will allow you to disable or enable DOM elements and their respective child elements based on the provided 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 tag 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);
      }
    }
  }
}

Remember to register the DisableDirective in the AppModule

How to implement the directive in your component?
Simply pass a boolean value (true/false) in the directive from the component.

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

You can find more information in the complete post HERE

See a live example on Stackblitz

Answer 13

Answer №7

If you're looking to achieve this, consider utilizing attribute binding. It's a straightforward approach. Take a look at the documentation for guidance on implementation.

Answer 14

If you're looking to achieve this, consider utilizing attribute binding. It's a straightforward approach. Take a look at the documentation for guidance on implementation.

The disabled attribute in Angular 2+ does not seem to work for a div element when attempting to loop through ngFor

Answer №1

Answer №2

Examples of Syntax that Will Not Disable an Element

Examples of Syntax that Will Disable an Element

Answer №3

Answer №4

Answer №5

Update

Answer №6

Answer №7

Similar questions

Difficulties arise when attempting to install nodejs on linux using the npm install nodejs command

Having trouble typing a RequestHandler in Express JS using TypeScript?

The useEffect hook in React is signaling a missing dependency issue

Original: Generic for type guard functionRewritten: Universal

Sharing cookies between the browser and server in Angular Universal

I recently updated Angular Cli and now my app is searching for node_modules in a different location. Is there a way for me to revert it

Why should we include the '#' character in jhipster URLs?

Resolve routing problems with lazy loading in Angular7

Tips for utilizing regex to locate words and spaces within a text?

Unleashed Breakpoint Mystery in Ionic 5 Angular with VSCode

Creating a JSON file from a custom key-value class in Typescript: A comprehensive guide

A unique column in the Foundry system that utilizes function-backed technology to calculate the monthly usage of engines over a

Refreshing the view in Angular2 after rejecting changes in a text input field

What is preventing me from assigning to a class variable within a $http success handler?

When running ng serve, I encountered the following error message: "ERROR in Error: Internal Error: The name element has already been defined within the scope as [object Object]."

Error encountered while working with SVG in a functional React component with typescript

The specified property 'length' is not found on type OkPacket within the mysql2 module

Displaying a div component in React and Typescript upon clicking an element

Deactivate the SCSS styling for the last of its type

Methods for defining a variable in React with Typescript without encountering the "Index signature is missing in type" issue