How to disable a element using attribute directive?

Question

I created a custom directive to disable an element given a condition but it's not work as I expected. I tried

this.renderer.setAttribute(this.elementRef.nativeElement, "disabled", "true"); 

and

this.elementRef.nativeElement.disabled = true;

But none of them worked.

I tested this directive on mat-slide-toggle. If I add disabled attribute direct on HTML as below it works.

 <mat-slide-toggle
          [(ngModel)]="element.habilitado"
          (change)="toggleActive(element)"
          myCustomDirective
          disabled
        >

Here's my directive

import { Directive, ElementRef, OnInit, Renderer2 } from "@angular/core";

@Directive({
  selector: "[myCustomDirective]",
})
export class MyCustomDirective implements OnInit {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    console.log("nova diretiva");
  }

  ngOnInit(): void {
    console.log(this.elementRef.nativeElement);
    this.renderer.setAttribute(this.elementRef.nativeElement, "disabled", "true");
    this.elementRef.nativeElement.disabled = true;
  }

 
}

Answer 1

your question is duplicated, it has already been asked and answered here https://stackoverflow.com/a/63411260/4017037