> For the complete documentation index, see [llms.txt](https://fancyloves.gitbook.io/frontendtech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/directives/ngif.md).

# 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.