FrontEndTech
  • Introduction
  • ReactJS
    • Ecosystem
    • Refactor Using Functional Decomposition and Reducer Composition
  • AngularJS
    • installation
    • File structure
    • CLI
      • ng g
    • Fundamentals
      • Component
        • Lifecycle
        • Template
      • Decorations
      • Service
      • Pipe
      • Directives
        • NgClass
        • NgStyle
        • NgModel
        • Customized Attribute Directives
        • NgIf
        • NgFor
        • NgSwitch
        • NgForm
        • Customized Structural Directives
      • Module
        • Routing
    • Bindings
      • Property Binding
      • Event Binding
      • Data Binding
      • Attribute Binding
      • Class Binding
      • Style Binding
    • Forms
      • Reactive Form
      • Reactive vs Template
    • build
Powered by GitBook
On this page
  • The asterisk (*) prefix link
  • Remove, not Hide

Was this helpful?

  1. AngularJS
  2. Fundamentals
  3. Directives

NgIf

PreviousCustomized Attribute DirectivesNextNgFor

Last updated 5 years ago

Was this helpful?

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

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

When the condition is false,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.

NgIf