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');
}

functionToDisableDropDown() { this.isDropDownDisabled = true;} — Vijay Sankhat, Jun 02 '18 at 10:35
@Vijay Sankhat: Yes, eventually I ended up doing that only. But why this is not working is bothering me. — Ravi Yadav, Jun 02 '18 at 10:48
@Vega: Calling that function on click event on some other button. That method is getting called. I checked with a console.log — Ravi Yadav, Jun 02 '18 at 10:49
please try this https://stackoverflow.com/questions/38035620/disabling-a-button-by-grabbing-elementref-angular2 — Vijay Sankhat, Jun 02 '18 at 10:53
@RaviYadav I have updated my answer. Check that. Use `MatSelect` instead of `ElementRef` — Amit Chigadani, Jun 02 '18 at 11:18

score 5 · Accepted Answer · edited Mar 18 '20 at 03:32

5

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);

edited Mar 18 '20 at 03:32

aakasham

3
2

answered Nov 27 '18 at 13:19

Rapido

301
4
12

Amit Chigadani · Answer 2 · 2018-06-02T11:23:49.593

1

Change the type of exLoc from ElementRef to 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;
}

Working Demo

edited Jun 02 '18 at 11:23

answered Jun 02 '18 at 10:11

Amit Chigadani

28,482
13
80
98

tried that, didn't work. I eventually added the [disabled] = "value" in html and setting it as true and false in .ts file instead of calling the renderer2 method to get the desired result. But I still can't understand why the above code doesn't work. – Ravi Yadav Jun 02 '18 at 10:15
Is it working without using renderer like `this.exLoc.nativeElement.disabled = true;` – Amit Chigadani Jun 02 '18 at 10:28
yes as i said, i got the desired result. But my question is why its not working with renderer2 – Ravi Yadav Jun 02 '18 at 11:44
This could be a bug with `Renderer2` which does not accept `MatSelect` as input. – Amit Chigadani Jun 02 '18 at 14:06

score 0 · Answer 3 · answered Sep 17 '20 at 20:26

0

Use -> this.render.setProperty(this.exLoc.nativeElement, 'disabled', true); The ".nativeElement

answered Sep 17 '20 at 20:26

Flavio Rico Mendéz

1

Please explain your answer and format the code using backticks so it's easier to understand and read. – MkMan Sep 17 '20 at 23:03
Hello, Welcome to SO! Please edit the post and make code formatted in your answer. As it will justify your answer and gives a clear view of what you are trying to explain. – Devang Padhiyar Sep 18 '20 at 05:15

score 0 · Answer 4 · answered Dec 16 '20 at 15:53

I know this is an old question but the real problem is probably located into the fact that MatSelect is a custom element which doesn't really have a disabled attribute. MatSelect has probably its own manage of ControlValueAccessor. So if you want to disable a MatSelect element, you should have a reference to that component and use its own setDisabledState method (implemented from ControlValueAccessor Interface).

setDisabledState(isDisabled: boolean): void

Such as:

 @ViewChild(MatSelect)
 private _myMatSelect: MatSelect;

 ...

 xxx() {
     this._myMatSelect.setDisabledState(true); // Should trigger the engine to disable your MatSelect element.
 }

unable to setAttribute disabled using renderer2 on angular material select

4 Answers4