Angular ngif else example

 What is ngif in angular?

We all know ng means angular. 'If' is a statement check to achieve any logical operation. I hope every programmer used this statement in their application.let's discuss about '*ngif' directive in angular. Using this angular directive easily can handle the DOM manipulation in UI.

Why angular using an asterisk before *ngif statement?

Asterisk(*) is an identification of structural directive in angular which differentiates normal attribute and property binding. In short, it's called sugar syntax.

Where to use and which scenario has to use ngif directive?

ngifelse.ts	ngifelse.html	Result
employeedata:any;	<table class="table" > <thead> <tr> <th scope="col">Employee Id</th> <th scope="col">Full Name</th> <th scope="col">City</th> <th scope="col">Experience</th> <th scope="col">Salary</th> <th scope="col">Married</th> </tr> </thead> <tbody> <tr *ngFor="let data of employeedata">   <td>{{data.empid}}</td> <td>{{data.fullname}}</td> <td>{{data.city}}</td> <td>{{data.experience}}</td> <td>{{data.salary}}</td> <td>{{data.married}}</td> </tr>   </tbody> </table>	Employee Id Full Name City Experience Salary Married

ngifelse.ts	ngifelse.html	Result
employee = [{ empid: 5623, fullname: "Stephen", city: "Newyork", experience: "5 years", salary: 500000, married: false }, { empid: 6523, fullname: "Michel", city: "london", experience: "7 years", salary: 700000, married: true }, { empid: 6523, fullname: "peeter", city: "Dubai", experience: "8 years", // salary: null, married: true }, { empid: 7458, fullname: "stella", city: "Paris", experience: "4 years", salary: 400000, married: false }];	<table class="table" *ngIf="employee"> <thead> <tr> <th scope="col">Employee Id</th> <th scope="col">Full Name</th> <th scope="col">City</th> <th scope="col">Experience</th> <th scope="col">Salary</th> <th scope="col">Married</th> </tr> </thead> <tbody>   <tr *ngFor="let data of employee">   <td>{{data.empid}}</td> <td>{{data.fullname}}</td> <td>{{data.city}}</td> <td>{{data.experience}}</td> <td>{{data.salary}}</td> <td>{{data.married}}</td> </tr> </tbody> </table>	Employee Id Full Name City Experience Salary Married 5623 Stephen Newyork 5 years 500000 false 6523 Michel london 7 years 700000 true 6523 peeter Dubai 8 years   true 7458 stella Paris 4 years 400000 false

Have you seen the above code?. We have written ngif statement in table level so that if there is no data, table control will be removed otherwise the table header will be displayed unnecessary without data.

<table class="table" [hidden]="true" >

We can use property binding [hidden]="true"  also in this scenario instead of using 'ngif'. Both are behaving the same way. But, difference is hidden property hiding the element.'ngif' removing the element. I hope you know which one is the best.

Now we will try to achieve logical operation like &&,||,! using

1. Insert the text in the cell those married and greater than salary 600000.
2. Insert the text in the cell those admins or 8 years experience.
3. Insert the text in the cell those are not residing in London.

employee = [{
    empid: 5623,
    fullname: "Stephen",
    city: "Newyork",
    experience: "5 years",
    salary: 500000,
    married: false,
    role: 'admin'
  },
  {
    empid: 6523,
    fullname: "Michel",
    city: "london",
    experience: "7 years",
    salary: 700000,
    married: true,
    role: 'user'
  },
  {
    empid: 6523,
    fullname: "peeter",
    city: "Dubai",
    experience: "8 years",
   // salary: null,
    married: true,
    role: 'public'
  },
  {
    empid: 7458,
    fullname: "stella",
    city: "Paris",
    experience: "4 years",
    salary: 400000,
    married: false,
    role: 'user'
  }];

 

Using And(&&) operation in angular *ngIf: 

<p *ngIf="data.married ==true && data.salary > 600000"> Married and greater than salary 60000 </p>

Using Or(||) operation in angular *ngIf: 

<p *ngIf="data.role =='admin' || data.experience =='8 years'">admin or 8years </p>

Using Not(!) operation in angular *ngIf: 

<p *ngIf="data.city !='london'">not residing in London </p>

Using Else condition ng template in angular *ngIf: 

<button *ngIf="data.role =='admin'; else view" class="btn btn-primary">Edit</button>
 <ng-template #view>
   <button  class="btn btn-primary">View</button>
 </ng-template>

Using Then statement in angular *ngIf: 

 <ng-container *ngIf="data.role =='public';then  public; else user">
 </ng-container>
 
 <ng-template #user>
    <p>authenticated</p>
 </ng-template>
 <ng-template #public>
   <p>public</p>
 </ng-template>

ngifelse.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-ngifelse',
  templateUrl: './ngifelse.component.html',
  styleUrls: ['./ngifelse.component.css']
})
export class NgifelseComponent implements OnInit {
  employeedata:any;
 
  employee = [{
    empid: 5623,
    fullname: "Stephen",
    city: "Newyork",
    experience: "5 years",
    salary: 500000,
    married: false,
    role: 'admin'
  },
  {
    empid: 6523,
    fullname: "Michel",
    city: "london",
    experience: "7 years",
    salary: 700000,
    married: true,
    role: 'user'
  },
  {
    empid: 6523,
    fullname: "peeter",
    city: "Dubai",
    experience: "8 years",
   // salary: null,
    married: true,
    role: 'public'
  },
  {
    empid: 7458,
    fullname: "stella",
    city: "Paris",
    experience: "4 years",
    salary: 400000,
    married: false,
    role: 'user'
  }];
 
 
  constructor() { }
 
  ngOnInit() {
    console.log(this.employee)
  }
 
 
 
}
 

ngifelse.html

<table class="table" *ngIf="employee">
    <thead>
        <tr>
            <th scope="col">Employee Id</th>
            <th scope="col">Full Name</th>
            <th scope="col">City</th>
            <th scope="col">Experience</th>
            <th scope="col">Salary</th>
            <th scope="col">Married</th>
            <th scope="col">Info</th>
            <th scope="col">Role</th>
            <th scope="col">Else</th>
            <th scope="col">Then</th>
        </tr>
    </thead>
    <tbody>
 
        <tr *ngFor="let data of employee"   >
 
            <td>{{data.empid}}</td>
            <td>{{data.fullname}}</td>
            <td>{{data.city}}</td>
            <td>{{data.experience}}</td>
            <td>{{data.salary}}</td>
            <td>{{data.married}}</td>
            <td>
                <p *ngIf="data.married ==true && data.salary > 600000">married and greater than salary 60000 </p>
                <p *ngIf="data.role =='admin' || data.experience =='8 years'">admin or 8years </p>
                <p *ngIf="data.city !='london'">not residing in London </p>
            </td>
            <td>{{data.role}}</td>
            <td>
                <button *ngIf="data.role =='admin'; else view" class="btn btn-primary">Edit</button>
                <ng-template #view>
                    <button  class="btn btn-primary">View</button>
                </ng-template>
 
            </td>
            <td>
 
                    <ng-container *ngIf="data.role =='public';then  public; else user">
                    </ng-container>
 
                    <ng-template #user>
                        <p>authenticated</p>
                    </ng-template>
                    <ng-template #public>
                            <p>public</p>
                    </ng-template>
 
                </td>
        </tr>
    </tbody>
</table>  

Employee Id	Full Name	City	Experience	Salary	Married	Info	Role	Else	Then
5623	Stephen	Newyork	5 years	500000	false	admin or 8years not residing in London	admin	Edit	authenticated
6523	Michel	london	7 years	700000	true	married and greater than salary 60000	user	View	authenticated
6523	peeter	Dubai	8 years		true	admin or 8years not residing in London	public	View	public
7458	stella	Paris	4 years	400000	false	not residing in London	user	View	authenticated