Comprehensive Full Stack Development Tutorial: Learn Ionic, Angular, React, React Native, and Node.js with JavaScript

How do use ionic ngif else ?

Ionic ngIf else

In an Ionic angular application, we can use the *ngIf structure directive of angular. We can control the display of blocks of elements with the help of the *ngIf condition. In this article, we will learn how to ionic *ngif else condition with an example. Learn more information on an Angular directive, we have learned on an angular directive.

We have ngIf and ngFor are examples of structural directives. Structural directives change the DOM layout by adding or removing elements from the view.

In this article, we will learn how to use the ngIf directive in the Ionic Angular application. We have also demonstrated how to use if and else in an Ionic template.

Ionic ngIf structure directive syntax

The *ngIf structure directive adds and removes elements in the DOM, based on the Boolean result of an expression. The ngIf directive allows you to conditionally hide or show elements in the component template. The syntax of structure directive starts with an asterisk as in ngIf that can conditionally remove or add elements to our rendered HTML.

<div *ngIf="condition">Render content when condition is true.</div>

An ionic *ngIf directive example:

To check how *ngIf operates, an example below and we have a button to toggle control of city name on based on showCity variable boolean value.

ionic ngIf else  example
ionic ngif else example
<ion-header [translucent]="true">
      Ionic 6 ngIf directive

<ion-content class="ion-padding">
  <h3>Hello everyone !</h3>
  <h3>My name is {{ employee.fname }} {{ employee.lname }}</h3>

  <ion-button (click)="moreInfo()">More Details</ion-button>

  <div *ngIf="showCity === true">
    <h3>I live in {{}}</h3>
import { Component } from '@angular/core';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {
  employee = { fname: 'Happy', lname: 'Singh', city: 'Punjab' };
  showCity = false;

  moreInfo() {
    this.showCity = true;

An ionic ngif else example:

The ng-template directive allows us to run a set of HTML tag blocks based on ngIf|else condition. The syntax of ionic ngif else ng-template

<div *ngIf="condition; else conditionFalse">
	Render content when condition is true
<ng-template #conditionFalse>
	Render content when condition is false

We have *ngIf|else example using ng-template, based on *ngIf directive condition we have set a different color for even and odd number.

Ionic ngIf else example
Ionic ngIf else example

In this article, we have explored details on Angular directives ngIf directive. We demonstrate both if and else conditions in the Ionic component template.

Related posts

How do use ionic ngif else ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top