How to apply multiple template bindings on one element in angular [duplicate]

Answer 1

Can't use two template binding on one element in Angular 2 (like *ngIf and *ngFor). But you can achieve the same by wrapping the element with a span or any other element. It is good to append with an <ng-container> as it is a logical container and it will not get append to the DOM. For example,

<ng-container *ngIf="condition">
    <li *ngFor="let item of items">
        {{item}}
    </li>
</ng-container>

Answer 2

If you are using *ngFor and want to add *ngIf to check some field, if conditional is not too complicated, I use filter for that, where I run my conditional and return only items that enter in my condition inside that loop.. Hope it helps

something like that where I want to show only items with description:

<div class="delivery-disclaimer" *ngFor="let payment of cart.restaurant.payment_method | filter:[{short_name: cart.payment_method}] | onlyDescription" text-wrap>
        <ion-icon item-left name="information-circle"></ion-icon> {{payment.pivot.description}}
    </div>

davor

Answer 3

You can use the following (expanded version) to preserve the document structure (e.g. for your css selectors):

<template [ngIf]="itsNotF && itsNotF.length">
    <div [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
    </div>
</template>

Answer 4

Put your *ngIf in a parent div, and the *ngFor can stay where it is.

For example:

<div *ngIf="itsNotF && itsNotF.length">
    <div [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
    </div>
</div>