Tutorial
*ngIf Directive in Angular 2
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
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>
