0

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 * .Is there a way to show the option dropdown on condition from a option list?

Shashi Ranjan
  • 1,491
  • 6
  • 27
  • 52

2 Answers2

1

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

Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
0

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

Prabhu Thomas
  • 174
  • 2
  • 9