невозможно установить атрибут отключен при использовании renderer2 при выборе углового материала

Question

Я не могу отключить выпадающий список угловых материалов с помощью рендерера2.Ниже мой код

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

Правильный способ сделать это - использовать Renderer2.

disabled - это свойство, поэтому оно не работает с вашим кодом.

Правильный код:

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

Answer 2

Изменить тип exLoc с ElementRef на MatSelect

constructor(public renderer: Renderer2) {} 
@ViewChild('exLoc') exLoc: MatSelect;

functionToDisableDropDown() {
  // not sure why is this not working
  //this.renderer.setAttribute(this.exLoc, 'disabled', 'true');

  // without using renderer
  this.exLoc.disabled = true;
}

Рабочая Демо