无法使用Renderer2更改使用ViewChild引用的按钮的属性

Question

I'm currently trying to change an attribute of a button using Renderer2 but I keep getting an error saying:

ERROR TypeError: Cannot read property 'setAttribute' of undefined

I want to be able to add the disabled attribute to the button when I click it.

I'm using the mat-button component from angular material: https://material.angular.io/components/button/overview

I've tried logging the value of the button reference to the console and it isn't logging 'undefined'

Here is the button html element:

<button #stickButton mat-raised-button color="warn" (click)="onStickButtonClick()">Stick to Bottom</button>

Here is the reference and onclick function inside the typescript class:

constructor(private renderer: Renderer2){
}

@ViewChild('stickButton', {static: false}) private stickButton: ElementRef;

onStickButtonClick(){
  this.renderer.setAttribute(this.stickButton.nativeElement, 'disabled', '');
}

The output I'm hoping for is that the button element becomes like this:

<button #stickButton disabled mat-raised-button color="warn" (click)="onStickButtonClick()">Stick to Bottom</button>

Answer 1

Your code above would work for a normal button, not a button having a material button directive attached.

The element you are getting with the ViewChild is actually of the type MatButton which doesn't have a property nativeElement. So what is undefined in your case is

this.stickButton.nativeElement .

Since it is a MatButton, you can actually disable the button directly like:

this.stickButton.disabled = true

Here is a complete example:

export class AppComponent  {
  constructor(){
  }

  @ViewChild('stickButton', {static: false}) private stickButton: MatButton;

  onStickButtonClick(){
    this.stickButton.disabled = true;
  }
}

Here is a stackblitz