How to use *ngIf and *ngFor on same element

ngif and ngfor On Same Element Causing Error

How To Solve

In this article I will explain with an example, how to use *ngIf and *ngFor on same element

For use *ngIf and *ngFor on same element, You need to use <ng-container> or <template>. both of the uses is same.

What is ng-container

<ng-container> if you need a helper element for nested structural directives like *ngIf or *ngFor or if you want to wrap more than one element inside such a structural directive;

When we use ng-container or template

Angular v6 recommend to use <ng-container> instead of <template>

<ng-container *ngFor="let navLink of navLinks">
   <li *ngIf="navLink.show">
       .....
   </li>
</ng-container>

Before Angular v6, we use <template> as a placeholder

<template *ngFor="let navLink of navLinks"  >
   <li *ngIf="navLink.show">
       .....
   </li>
</template>

Referances:

• https://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error
• https://github.com/angular/angular/issues/7315