NgIf

The asterisk (*) prefix link

<div *ngIf="hero" class="name">{{hero.name}}</div>


<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

The asterisk * is "syntactic sugar" for something a bit more complicated. Internally, Angular translates the *ngIf attribute into a <ng-template> element, wrapped around the host element.

Render result :

Angular consumed the <ng-template> content during its actual rendering and replaced the <ng-template> with a diagnostic comment.

Remove, not Hide

When the condition is false,NgIfremoves its host element from the DOM, detaches it from DOM events (the attachments that it made), detaches the component from Angular change detection, and destroys it.

The component and DOM nodes can be garbage-collected and free up memory.