Hello Devs,
In this tutorial, we will learn Angular 9/8/7 NgIf Else Example
In this section, we will see example of NgIf Else example in angular 6, angular 7, angular 8 and angular 9
Follow this step by step guide below.
1) ngIf Condition Example
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
isShow: boolean = true;
}src/app/app.component.html
<h1>Angular ngIf else Example - rathorji.in</h1>
<p *ngIf="isShow">Show this only if "show" is true</p>2) ngIf Else Condition Example
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
isShow: boolean = false;
}src/app/app.component.html
<h1>Angular ngIf else Example - rathorji.in</h1>
<div *ngIf="isShow; else ifNotShow">
<p>
Display if true.
</p>
</div>
<ng-template #ifNotShow>
<p>
Display if not true.
</p>
</ng-template>3) ngIf Else Template Example
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
isShow: boolean = false;
}src/app/app.component.html
<h1>Angular ngIf else Example - rathorji.in</h1>
<ng-template
*ngIf="isShow;then ifShow; else ifNotShow">
</ng-template>
<ng-template #ifShow>
<p>
Display if true
</p>
</ng-template>
<ng-template #ifNotShow>
<p>
Display if not true.
</p>
</ng-template>May this example help you.