How do use ionic ngif else ?

In an Ionic angular application, we can use *ngIf structure directive of angular. We can control the display of blocks of elements with the help of *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">
  <ion-toolbar>
    <ion-title>
      Ionic 6 ngIf directive
    </ion-title>
  </ion-toolbar>
</ion-header>

<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 {{ employee.city}}</h3>
  </div>
</ion-content>
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  employee = { fname: 'Happy', lname: 'Singh', city: 'Punjab' };
  showCity = false;

  moreInfo() {
    this.showCity = true;
  }
}

An ionic ngif else directive example:

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

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

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
More information and ngStyle example check on articles here.

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

Related posts

Leave a Comment

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

Scroll to Top