Enable/Disable all HTML elements inside Div in Angular Using Directive

What is an Angular Directive?

Directives are the functions that will execute whenever Angular compiler finds it. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM.

From the core concept, Angular directives are categorized into three categories:-

1. Components — directives with a template.
2. Structural directives — change the DOM layout by adding and removing DOM elements.
3. Attribute directives — change the appearance or behavior of an element, component, or another directive.

In this post, we will create an attribute directive for disabling or enabling div and it’s child elements.

Let’s start. I assume that you have a basic to intermediate knowledge on Angular Components and Directives.

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);
      }
    }
  }
}

AppModule

Do not forget to register DisableDirective in the AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { DisableDirective } from './disable.directive';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, DisableDirective ],
  bootstrap:    [ AppComponent ]
})
export class 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">
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name">
      </div>
      <br>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password">
      </div>
      <br>
      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" class="form-control" id="alterEgo">
      </div>
      <button type="submit" class="btn btn-success">Submit</button>
    </form>
</div>

Styling

Add style in your main css file.

[app-disabled] {
  opacity: 0.96;
  pointer-events: none;
}

Please find the example on stackblitz-

angular-ivy-4t5dkt - StackBlitz

Wrapping It All Up

This utility gives a nice feature to every Angular app. Feel free to use and distribute the code. That’s all folks. Thanks!