Angular: Disable Material Button With Directive Doesn't Works

I want to disable some buttons through a directive (add disabled property to button). This directive works on classic html button but doesn't works with angular material design but

Solution 1:

If you place mat-button on button element it will be content projected into mat-button component internally. since it is content projected you are not able to set disable true in constructor.

Try AfterViewInit

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


@Directive({
  selector: '[myDisableButton]'
})
export classHideCantEditDirectiveimplementsAfterViewInit{
  constructor(private el: ElementRef, private renderer: Renderer2) {
    // try with Renderer2this.renderer.setProperty(this.el.nativeElement, 'disabled', true);

  }

  ngAfterViewInit(){
   // try with ElementRefthis.el.nativeElement.disabled = true;

    this.renderer.setStyle(this.el.nativeElement, 'border', '2px solid green');
  }
}

Forked Example