Angular *ngIf Directive

Angular *ngIf Directive


In this 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 following:

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 the 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 following:

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

<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 define elseBlock in the ngIf's else block, that's why we've used elseBlock as 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 following:

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


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




ngIf null check


ngIf directive is very usefull 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 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.

Also Read:

Angular *ngIf Directive Angular *ngIf Directive Reviewed by Borad Akash on February 11, 2019 Rating: 5

No comments:

Powered by Blogger.