unable to setAttribute disabled using renderer2 on angular material select

Question

I am not able to disable the select dropdown of angular material using the renderer2. Below is my code

Component.html

            <mat-select #exLoc (selectionChange)="someFun($event)" [(value)]="someVal">
              <mat-option aria-selected="true" [value]="locVal" *ngFor="let location of locations">{{location.LocationName}}
              </mat-option>
            </mat-select>

Component.ts

constructor(public renderer: Renderer2) {} 
@ViewChild('exLoc') exLoc: ElementRef;
functionToDisableDropDown() {
 this.renderer.setAttribute(this.exLoc, 'disabled', 'true');
}

Answer 1

The correct way to do it is actually to use Renderer2.

disabled is a Property that is why it is not working with your code.

Correct code :

this.renderer.setProperty(this.exLoc, 'disabled', true);
this.renderer.setProperty(this.exLoc, 'disabled', false);