*ngIf Directive in Angular 2

NgIf is a built-in template directive that adds or removes parts of the DOM depending on if the expression passed to it is true or false:

<div *ngIf="userHasPet">
  {{ user.pet.name }}
</div>

In the above, if userHasPet is true, then the div will be included in the DOM (it will be on the page), and if userHasPet is false, the div will be removed from the DOM (it wonโ€™t be on the page).

Like with *ngFor, the * character allows to create a template and allows for a shortcut to this syntax: template=โ€ngIf userHasPetโ€.

You can also pass in a more complex expression to *ngIf:

<div *ngIf="user.name.length > 6 && user.name.length < 10">
  Long name {{ user.name }}, but not too long!
</div>

๐ŸŠ Alligator.io recommends

Our recommended Angular courses

See Also

  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#
#native_cta#