In order to use *ngIf without an extra element in Angular 2+, we can use either <ng-container> or <ng-template>
But in many cases, <ng-container> is recommended.
The best scenario regarding the usage of with *ngIf without an extra element is mentioned below.
app.component.ts:
import { Component } from '@angular/core' ;
@Component({
selector: 'my-app-table' ,
template: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
India=[{city: 'Hyderabad' }, {city: 'Mumbai' }]
}
|
app.component.html :
< h1 >ng-container example</ h1 >
< div * ngFor = "let state of India" >
< ng-container * ngIf = "state.city" >
< p > {{ state.city }} </ p >
</ ng-container >
</ div >
|
Illustration of above code for ng-container
If we inspect it then we can see there is no extra element added after <div> tag and before <p> tag.
