Dynamically disable option of html-select in Angular 4

Question

is there a way to disable an option of a select element in angular 4?

I tried something like this but it does not work

<select type="number" [(ngModel)]="selectedItem">
    <option [disabled]="i.disabled" *ngFor="let i of items" [ngValue]="i.id">{{i.designator}}</option>
</select>

Whereabout i.disabled contains a boolean.

Many thanks in advance

I just added [disabled]="true" but still all options are not disabled — Muidem
– Muidem, Commented Jun 18, 2017 at 19:43
your code is working without any changes. What is your array object looks like? — Surya Prasad Khanal
– Surya Prasad Khanal, Commented Jun 18, 2017 at 19:46
Thank you! You were right. I was doing the changes on a different component. Many thanks. it was my fault — Muidem
– Muidem, Commented Jun 18, 2017 at 19:55

Sajeetharan · Accepted Answer · 2017-06-18 19:42:44Z

6

It works fine here

<select type="number" [(ngModel)]="selectedItem">
    <option [disabled]="i.disabled" *ngFor="let i of items" [ngValue]="i.name">{{i.name}}</option>
</select>

DEMO

answered Jun 18, 2017 at 19:42

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

10101101 Over a year ago

Ok nice, but what about dynamic disabling, based on some other action, from some method triggered in component for example. Is that possible ?

Surya Prasad Khanal · Accepted Answer · 2017-06-18 19:44:53Z

1

this.items = [{id:1,disabled:true,designator:123}];

<select type="number" [(ngModel)]="selectedItem">
              <option [disabled]="i.disabled" *ngFor="let i of items" [ngValue]="i.id">{{i.designator}}</option>
          </select>

working fine.

answered Jun 18, 2017 at 19:44

Surya Prasad Khanal

5509 silver badges28 bronze badges

Collectives™ on Stack Overflow

Dynamically disable option of html-select in Angular 4

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related