¿Cómo usar ngIf sin un elemento adicional en Angular2?

Para usar *ngIf sin un elemento adicional en Angular 2+, podemos usar <ng-container> o <ng-template>
Pero en muchos casos, se recomienda <ng-container>.
El mejor escenario con respecto al uso de with *ngIf sin un elemento adicional se menciona a continuación.

aplicación.componente.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'}]
  
}

aplicación.componente.html :

<h1>ng-container example</h1>
  
 <div *ngFor="let state of India"> 
   <ng-container *ngIf="state.city">
      <p> {{ state.city }} </p>
   </ng-container>
 </div>

Ilustración del código anterior para ng-container

Si lo inspeccionamos, podemos ver que no se agregó ningún elemento adicional después de la etiqueta <div> y antes de la etiqueta <p>.