Angular ngIf directive with example

Angular *ngIf Directive

by

In this Angular ngIf directive with example article, we’ll see how to user Angular’s ngIf, with then and else block.

ngIf is angular’s builtin structural directive the adds or removes the part of the DOM based on the value supplied to the ngIf directive. If the value is true, Angular renders the part of the DOM and if false then remove the part of the DOM.

What does ngIf do?

ngIf show or hide the part of the DOM based on the condition value.   We can have a boolean flag in a component as follows: 

import { Component } from '@angular/core';
@Component({  
   selector: 'app-demo',  
   templateUrl: './demo.component.html',  
   styleUrls: ['./demo.component.css']
})
export class DemoComponent {  
   isLoggedIn: boolean = true;
   constructor(){}
}

Based on the value of isLoggedIn flag, the template will show a different message.

<div *ngif="isLoggedIn">
   Welcome back, User.
</div>
<div *ngif="!isLoggedIn">  
   Please login to the system.
</div>

ngIf and else

We can use ngIf and else block as follows:

Here we are telling angular the if isLoggedIn is true then show Welcome back, User otherwise show elseBlock

<pre><code class="language-markup"><div *ngIf="isLoggedIn; else elseBlock">  
   Welcome back, User.
</div>
<ng-template #elseBlock>  
   Please login to the system.
</ng-template></code></pre>

<div *ngif="isLoggedIn; else elseBlock">  
   Welcome back, User.
</div>
<ng-template #elseblock="">  
   Please login to the system.
</ng-template>

You may have noticed that here we’ve used #elseBlock (a template reference variable) and ng-template

The template reference variable name should be the same as whatever we defined in the else block. Here we’ve to define elseBlock in the ngIf’s else block, that’s why we’ve used elseBlock as a template reference variable.

ng-template is the virtual container. that means that it will be rendered only if it is needed, so in this example, it will only be rendered if isLoggedIn is false.

ngIf then and else

We can use ngIf, then and else block as follows:

Here we are telling angular the if isLoggedIn is true then use thenBlock otherwise, show elseBlock

<div *ngif="isLoggedIn; then thenBlock; else elseBlock">
</div>
<ng-template #thenblock="">  
   Welcome back, User.
</ng-template>
<ng-template #elseblock="">  
   Please login to the system.
</ng-template>

ngIf with Observable and async pipe

Now we’ll see how can we use ngIf with rxjs observable.

If we’ve isLoggedIn as rxjs observable then we can check it as follows:

<div *ngif="(isLoggedIn$|async); else elseBlock">   
   Welcome back, User.
</div>
<ng-template #elseblock="">  
   Please login to the system.
</ng-template>

Where can we use ngIf directive?

We can use ngIf directive in any HTML tag or even we can use it with the angular component as well.

We can use ngIf with angular component as follows:

<custom-cmp *ngif="isLoggedIn"></custom-cmp>

ngIf null check

ngIf directive is very useful for null checking.

If we are accessing the property of the object, it will throw an error if the object is not available. It usually happens when we are getting data from the server and data is not available until the server responds with.

So in that scenario ngIf is useful for null checking.

<div *ngif="user">Welcome back, {{user.Email}}.</div>

Here in the above code, we are accessing Email property from user object. Imaging what if user is null. Angular will throw an error if user is null. That’s why we’ve checked if user is available then access Email property.

I hope you like this Angular ngIf directive with example article.

Also Read:

Angular CRUD operation Example
Top 10 VS Code extensions