ngIf is used to make conditional statement in angular template same as we can also use if else. we will learn use NgIf, if else and elseif in angular 12 in this article. As we all programmers know if or if else condition is used to create conditional statements so in angular template we can also use the if else
but for elseif
there is no direct way but we can use alternate way.
Here is the syntax of *ngIf
<ng-container *ngIf="count == 1"></ng-container>
Syntax of *ngIf
else
<ng-container *ngIf="count === 1;else second"></ng-container>
<ng-template #second>
<ng-container *ngIf="count === 2"></ng-container>
</ng-template>
Syntax of *ngIf
elseif
<ng-container *ngIf="count === 1;else second"></ng-container>
<ng-template #second>
<ng-container *ngIf="count === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>
You can also achieve the same as below
<ng-container *ngIf="count === 1;"></ng-container>
<ng-container *ngIf="count === 2"></ng-container>
<ng-container *ngIf="count<0"></ng-container>
Let’s understand use NgIf, if else and elseif in angular 12 with example
Step 1 : Create an angular app
First step is to setup an angular app using below command
ng new example-component
Step 2: Create a Component
Create a component so we can add conditional statements
ng g c test-condition
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-test-condition',
templateUrl: './test-condition.component.html',
styleUrls: ['./test-condition.component.css']
})
export class TestConditionComponent implements OnInit {
count:number =1;
constructor() {
setInterval(()=>{
this.count++;
},2000)
}
}
Step 3 : Create template and add conditional *ngIf
Now, add simple html template with *ngif
<h1>use NgIf if else and elseif in angular- ReaderStacks</h1>
<h2>Example 1</h2>
<ng-container *ngIf="count === 1;else second"> Condition 1 </ng-container>
<ng-template #second>
<ng-container *ngIf="count === 2;else third" >Condition 2 </ng-container>
</ng-template>
<ng-template #third> Condition 3</ng-template>
<h2>Example 2</h2>
<!-- count = 5 -->
<ng-container *ngIf="count >= 1 && count <= 3; then elseif3"></ng-container>
<ng-container *ngIf="count >= 4 && count <= 6; then elseif4"></ng-container>
<ng-container *ngIf="count >= 7; then elseif5"></ng-container>
<!-- If Statement -->
<ng-template #elseif3>
count between 1 and 3
</ng-template>
<!-- If Else Statement -->
<ng-template #elseif4>
count between 4 and 6
</ng-template>
<!-- Else Statement -->
<ng-template #elseif5>
count greater than 7
</ng-template>
Live Example and code: