Populate options on condition from a list of options

Question

I am trying to populate options on condition from a list of options. The HTML component I am using is:

<div class="select">
    <select name="credentialsName" ngModel required>
        <option *ngFor='let credential of credentials' *ngIf="credential.type==='MACHINE'" [value]="credential.name">{{credential.name}}</option>
    </select>
</div>

I am getting syntax error: Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * .Is there a way to show the option dropdown on condition from a option list?

Answer 1

You cannot use both *ngFor and *ngIf in the same element. You need to use a filter in the *ngFor.

Check this thread for more details How to apply filters to *ngFor

Answer 2

Because you cannot use Both directives on the single elements, As only one structural directive is allowed on one element at a time.

In order to achieve, you can use <ng-container>

<ng-container *ngFor='let credential of credentials' >
        <option [value]="credential.type" *ngIf="credential.type==='MACHINE'">
            {{credential.type}}
          </option>
      </ng-container>

Working Example