mat-button set disabled using an attribute directive?

1
votes

I have an attribute directive called userPermission, that is supposed to do some logic and then set the disabled attribute to the element it is attached. <button userPermission>Disable me with userPermission</button>

<button color="primary" (click)="onNewConfiguration()" userPermission>Add Configuration</button>
<button color="primary" mat-raised-button (click)="onNewConfiguration()" userPermission>Add Configuration</button>

the mat-raised-button does not work with ElementRef, or Renderer2

I can not use <button mat-raised-button [disabled]="someVar"></button>

I have to use an attribute directive. and I have tried

this.el.nativeElement.disabled = true;
this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
this.el.nativeElement.setAttribute("disabled", "true");

None of these techniques worked.

How can you set a mat-button to disabled using an attribute directive?

5
angularangular-material
Wow thanks for all the replies guys, I am a bit too busy to test any of these at the moment, but ill try to get to it eventually! – Arron McCrory

5 Answers

3
votes

Use template ref to disable the Button dynamically or Another Way is use ViewChild to get ref to the button then set _disable to tru

 @ViewChild('ref2') ref2;

HTML

<div class="button-row">
  <button #ref mat-raised-button (click)="onNewConfiguration(ref)">Basic</button>

TS

set _disabled property true to disable button

 onNewConfiguration(ref){
    ref._disabled=true;
  }

Example:https://stackblitz.com/edit/angular-zdcz25

1
votes

After a lot of research, I found a solution for this. Though this is very late to answer but might be useful for someone else. I made it work by adding a class with styles as follows:

.disable-ctrl {

  pointer-events: none !important;

}

Then added above class in directives native element as follows:

this.renderer.addClass(this.el.nativeElement, "disable-ctrl");

With this I was able to disable all the controls in my app by using directive.

0
votes
this.el.nativeElement.disabled = true;

works for me.

see https://angular-rb5vmu.stackblitz.io, in the Get Data button there is a directive: spinnerButton, that receives a value (boolean) to change button text and disable it.

0
votes

Modify directly the DOM in Angular 6 with

this.elem.nativeElement.querySelector(".button-row").xxx = 'yyy';

is an security issue. Do not do it.

You have to do with render2 object. That way:

this.render2.setProperty(this.elem.nativeElement.querySelector(".button-row"),'xxx', 'yyy');

That way To disable your button:

this.render2.setProperty(this.elem.nativeElement.querySelector(".button-row"),'disabled', 'true');

The value can be any other like 'disabled', 'x', 'freedom!', 'anything', 'false', etc

To enable your button:

this.render2.setProperty(this.elem.nativeElement.querySelector(".button-row"),'disabled', '');

The value just have to be empty.

0
votes

we can simply do this

<button mat-button #matRef (click)="buttonMat(matRef)"></button>

buttonMat(matRef) {
    matRef.disabled=true;
}