Disable components using directive

The code snippet below shows how to disable (angular material) components if the shouldDisable$ stream from the ExampleService emits true. This can be a useful solution when we want to block actions when the user does not have the appropriate permissions resulting from:

• user role
• a feature that is blocked for the user etc.

(*) DestroyedDirective was implemented according to the idea of Kristiyan Kostadinov.

@Directive({
  selector: '[disableInteractiveElements]',
  standalone: true,
  hostDirectives: [DestroyedDirective]
})
export class DisableInteractiveElementsDirective implements OnInit {
  private readonly destroyed$ = inject(DestroyedDirective).destroyed$;

  constructor(private readonly service: ExampleService,
              private readonly elementRef: ElementRef,
              @Optional() @Self() private readonly button: MatButton,
              @Optional() @Self() private readonly select: MatSelect) {}

  ngOnInit(): void {
    this.service.shouldDisable$
    .pipe(takeUntil(this.destroyed$))
    .subscribe((shouldDisable) => {
      if (this.button) {
        this.button.disabled = shouldDisable;
      } else if (this.select) {
        this.select.disabled = shouldDisable;
      } else if (this.elementRef.nativeElement && ('disabled' in this.elementRef.nativeElement)) {
        this.elementRef.nativeElement.disabled = shouldDisable;
      }
    });
  }
}

Usage in template:

  <button mat-button mat-raised-button>Always available</button>
  <button disableInteractiveElements mat-button mat-raised-button>Could be disabled</button>
  <mat-select disableInteractiveElements placeholder="Settings">
    <mat-option value="'setting1'">Setting 1</mat-option>
    <mat-option value="'setting2'">Setting 2</mat-option>
  </mat-select>
  <input disableInteractiveElements type="text" />

In the case shown above, the first button will always be active, while the other elements, i.e. the second button, select and input, will be active if service.shouldDisable$ emits false.