Angular NgIf Else | ng if else in Angular 9/8 Example
In this post we will give you information about Angular NgIf Else | ng if else in Angular 9/8 Example. Hear we will give you detail about Angular NgIf Else | ng if else in Angular 9/8 ExampleAnd how to use it also give you demo for it if it is necessary.
Hi Dev,
Here, i will show you how to works angular ngif else example. In this article, we will implement a angular ngif else template example. i explained simply step by step angular ngif else example.
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 - ItSolutionStuff.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 - ItSolutionStuff.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 - ItSolutionStuff.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…
Hope this code and post will helped you for implement Angular NgIf Else | ng if else in Angular 9/8 Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs