CODEWITHSUNDEEP
angularangular8
Rwitaban Goswami
Rwitaban Goswami

Reputation: 467

How to conditionally show a dropdown option in Angular?

I have a list of options called header to show in a dropdown list. I also have another list, table_settings['tags'], and I want the i'th element of header in the dropdown list if the i'th element of table_settings['tags'] is 'Num'.

Currently my code is:

<div *ngIf="header">
    <select (change)-"selectTarget($event)">
        <option *ngFor="let option of header; let i=index" value="{{i}}">
            <ng-template *ngIf="table_settings['tags'][{{i}}]=='Num'">
                {{ option }}
            </ng-template>
        </option>
    </select>
</div>

But this is throwing all sorts of errors at the console

Upvotes: 3

Views: 2663

Answers (4)

user08
user08

Reputation: 735

<div *ngIf="header">
    <select (change)-"selectTarget($event)">
        <ng-container *ngFor="let option of header; let i=index" value="{{i}}">
            <option *ngIf="table_settings['tags'][i]=='Num'">
                {{ option }}
            </option>
        </ng-container>
    </select>
<div>

Upvotes: 0

Siddharth Pal
Siddharth Pal

Reputation: 1458

Interpolation ({{}}) allows you to incorporate calculated value(strings) into the text between HTML element tags and attribute assignments. In your case, you don't need to calculate anything as you already have i handy.

Solution

<div *ngIf="header">
<select (change)-"selectTarget($event)">
    <option *ngFor="let option of header; let i=index" value="{{i}}">
        <ng-template *ngIf="table_settings['tags'][i]=='Num'">
            {{ option }}
        </ng-template>
    </option>
</select>

Upvotes: 1

uiTeam324
uiTeam324

Reputation: 1245

<div *ngIf="header">
<select (change)-"selectTarget($event)">
    <option *ngFor="let option of header; let i=index" value="{{i}}">
        <ng-template *ngIf="table_settings['tags'][i]=='Num'">
            {{ option }}
        </ng-template>
    </option>
</select>

Upvotes: 1

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

*ngIf="table_settings['tags'][i]=='Num'"

Upvotes: 1

Related Questions