Angular2 *ngIf inside *ngFor

0
votes

In angular 2 I want to loop through an array and show options in drop-down on the basis of some conditions. According to my search I can place a condition in ng-container directive above loop. How can I do that inside loop. (Please note that If I place what inside loop a blank space will be shown instead of option). Thanks!

<md-autocomplete #package="mdAutocomplete" [displayWith]="displayPackage">
    <md-option (onSelectionChange)="packageSelection($event, package) *ngFor="let package of (reactivePackages | async)"" [value]="package">
          {{ package.packageName }}
          {{package.serviceId}}
          {{service.serviceId}}
    </md-option>
</md-autocomplete>
1
angular2-directivesngforangular-ng-if
You can filter the array the ngFor runs (*ngFor="let package of (reactivePackages | async).filter(pac => pac.someValue == 1)"), or you can place the ngIf inside the ngFor and also use hidden attribute. – Eliran Pe'er

1 Answers

1
votes

You can loop through the array using ng-container and can use ngif on md-options like this:

  <md-autocomplete #package="mdAutocomplete" [displayWith]="displayPackage">
    <ng-container *ngFor="let package of (reactivePackages | async)">
        <md-option (onSelectionChange)="packageSelection($event, package)" [value]="package" *ngIf="your-condition" >
            {{ package.packageName }} {{package.serviceId}} {{service.serviceId}}
        </md-option>
    </ng-container>
</md-autocomplete>

Hope this helps.