+ 44 ( 01244 ) 911212

*ngIf Directive in Angular 2

May 12, 2026
Javascript
Comment off

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:

				
					
&lt;div *ngIf="userHasPet"&gt;

  {{ user.pet.name }}

&lt;/div&gt;

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<^>:

				
					
&lt;div *ngIf="user.name.length &gt; 6 &amp;&amp; user.name.length &lt; 10"&gt;

  Long name {{ user.name }}, but not too long!

&lt;/div&gt;