Angular 9/8/7 NgIf Else Example

April 25, 2020 | Category : Angular

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...