Expert Angular

ngIf directive

The ngIf directive help us to evaluate the expression based on a condition very similar to the if statements in any programming language.

The general syntax is shown in the following code snippet :

 <div *ngIf="!isLoggedIn">   <p>Hello Guest user</p> </div>

The preceding code snippet has a *ngIf condition; if isLoggedIn is true, the directive will render the statement inside; otherwise, it will skip and continue. Let's create an example using both the *ngFor and *ngIf statements as shown in the following code:

import {Component} from '@angular/core';@Component({  selector: 'my-app',  template: `    <h4>{{title}}</h4>    <strong>Using ngIf directive</strong>    <div *ngIf="isLoggedIn">      <p>Hello Packt Author</p>    </div> <div *ngIf="!isLoggedIn"> ...