Hi Dev,
I will explain step by step tutorial angular 9 ngif else example. you can see angular 8 ngif else template example. you will learn angular ngif else example. if you want to see example of ngif else condition in angular 9/8/7 then you are a right place. Here, Creating a basic example of how to use ngif else in angular.
This article will give you simple example of ngif else condition in angular. You can easily use ng if else in angular 6, angular 7, angular 8 and angular 9 example.
I will simply give you bellow examples:
1) ngIf Condition Example
2) ngIf Else Condition Example
3) ngIf Else Template Example
Let's see bellow examples one by one.
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 - HDTuto.com</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 - HDTuto.com</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 - HDTuto.com</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>
I hope it can help you...
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example