# NgIf

## The asterisk (\*) prefix link

```markup
<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 :

![](https://angular.io/generated/images/guide/structural-directives/hero-div-in-dom.png)

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,[`NgIf`](https://angular.io/api/common/NgIf)removes 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.