angularangular-materialangular2-hostbinding

Access mat-raised-button disabled attribute


i try to access (read) the disabled attribute of a mat-raised-button Button inside of a directive.

If disabled is set true, inside my directive, during ngOnInit, disabled is still false, but the material button is rendered as disabled (grey).

Button:

<button
  my-directive
  mat-raised-button
  [disabled]="isDisabledOrNot()" // returns true
  (click)="doSomething()>bla</button>

My Diective @HostBinding Attempt:

export class myDirective implements OnInit {
  constructor(private element: ElementRef, private renderer: Renderer2) {}

  @HostBinding('disabled')
  disabled: any;

  ngOnInit(): void {
    console.log(`disabled:`, this.disabled); // prints false

I tried using the nativeElement:

export class myDirective implements OnInit {
  constructor(private element: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    console.log(`disabled:`, this.element.nativeElement.disabled); // prints false

And i used some hack version involved class.mat-button-disabled from github issues but neither works.

I can set the disabled button using the Renderer2 setAttribute method. But that doesn't work for reading.

Any Ideas?


Solution

  • Inside your directive you can Inject MatButton class and check whether it is disabled or not

    constructor(private button:MatButton){}
      
    ngOnInit(){
        console.log(this.button.disabled);
    }
    

    Working Example