How do I hide selected option when item is already selected? Angular 6+

Question

I have a very simple loop through a list of items. And outside of the select dropdown is another loop which can select x number amount of times. The below code would just do that. However, it is not working in IE8/9/11 as [hidden] is not supported. I was wondering if there are alternatives to hide the items that are already selected.

<div *ngFor="let number of numbers; let i = index" >
    <select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
    <option value="Select one" selected>Select one</option>
    <option *ngFor="let prod of productList; let x = index" 
    [ngValue]="prod" [hidden]="p.indexOf(prod) > -1" >{{prod}}</option>
    </select>
</div>

Answer 1

There are two ways to achieve what you want.

Using *ngIf

The first is using *ngIf and this is the preferred way. This removes the <option> tag from the DOM entirely.

<div *ngFor="let number of numbers; let i = index" >
    <select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
    <option value="Select one" selected>Select one</option>

    <!-- ng-container is now needed because there can only be 1 structural directive per element -->
    <ng-container *ngFor="let prod of productList; let x = index">
        <option *ngIf="p.indexOf(prod) === -1" [ngValue]="prod">{{prod}}</option>
    </ng-container>
    </select>
</div>

Using CSS

Alternatively, if you cannot remove the element from the DOM for some reason, you can also use CSS visibility: hidden .

component.html

<div *ngFor="let number of numbers; let i = index" >
    <select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
    <option value="Select one" selected>Select one</option>

    <!-- [class.hidden]="" appends the "hidden" css class, when the expression  on the right evaluates to true -->
    <option *ngFor="let prod of productList; let x = index" 
    [ngValue]="prod" [class.hidden]="p.indexOf(prod) > -1" >{{prod}}</option>
    </select>
</div>

component.css

.hidden {
    visibility: hidden;
}

Answer 2

I am not sure if there is any polyfill provided by angular yet.

But this code provides a nice work around to make it work in IE

Use custom attribute [attr.data-hidden] instead of [hidden] and then hide using css.

html

<div *ngFor="let number of numbers; let i = index">
    <select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
    <option value="Select one" selected>Select one</option>
    <option *ngFor="let prod of productList; let x = index" 
    [ngValue]="prod" [attr.data-hidden]="p.indexOf(prod) > -1 ? true: false" >{{prod}}</option>
    </select>
</div>

css

[data-hidden="true"]
{
  display: none !important
}