How to apply multiple template bindings on one element in angular
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>
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>
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>