Access mat-raised-button disabled attribute

Question

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?

score 2 · Accepted Answer · answered Aug 30 '22 at 09:18

2

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

answered Aug 30 '22 at 09:18

Chellappan வ

23,645
3
29
60

1

This also works for setting the state apparently :thumbs_up_emoji: – Andresch Serj Sep 01 '22 at 06:42

score 2 · Answer 2 · answered Aug 30 '22 at 09:44

The disabled attribute of an element is somewhat special, since it doesn't actually hold the values true or false.

If it's false, getAtrribute('disabled') returns null.

If it's true, getAtrribute('disabled') returns (an empty string).

That means one way to check if an element is disabled is to check whether getAttribute('disabled') does not return null.

In Directive form:

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

@Directive({
  selector: '[check-disabled]',
})
export class CheckDisabledDirective implements AfterViewInit {
  constructor(private readonly m_element: ElementRef<HTMLElement>) {}

  public ngAfterViewInit(): void {
    console.log(
      `Element is currently ` +
        (this.m_element.nativeElement.getAttribute('disabled') === null
          ? 'not disabled'
          : 'disabled')
    );
  }
}

Sorry, for me that didn't work. It always retunred `null`. This seems to be connected to the said usage of the material button. But thanks for the elaborate answer. — Andresch Serj, Aug 30 '22 at 11:05
@AndreschSerj That would make sense. This is more of a general answer to the `disabled` attribute on ansy element, but it probably behaves different when another directive also modifies it. The answer with the `MatButton` probably suits your case. — , Aug 30 '22 at 11:30

Andresch Serj · Answer 3 · 2022-08-30T12:03:48.717

0

This is one hacky Solution that worked for me:

nativeElement.getAttribute('ng-reflect-disabled') === 'true'

Now i implemented the Solution provided by Chellappan வ

edited Aug 30 '22 at 12:03

answered Aug 30 '22 at 09:12

Andresch Serj

35,217
15
59
101

Access mat-raised-button disabled attribute

3 Answers3