Angular: disable material button with directive doesn't works

Question

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 button (mat-button):

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


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

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



@Component({
  selector: 'my-app',
  template: `
  <button mat-button myDisableButton (click)="onClick()">Material Button</button><br /><br />
  <button myDisableButton (click)="onClick()">Classic Button</button>`,
  styles: [ 'button:disabled { border: 2px solid red !important; }' ]
})
export class AppComponent  {

  onClick(){
    alert('ok');
  }
}

Output:

See on stackblitz: https://stackblitz.com/edit/angular-5xq2wm

Chellappan வ · Accepted Answer · 2019-09-02 07:56:48Z

7

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 class HideCantEditDirective implements AfterViewInit {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    // try with Renderer2
    this.renderer.setProperty(this.el.nativeElement, 'disabled', true);

  }

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

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

Forked Example

answered Sep 2, 2019 at 7:56

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: disable material button with directive doesn't works

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related