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.
<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 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
</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.
Conclusion
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 to implement an ionic slider
- Complete guide on an ionic grid with an example
- How to implement an ionic alert controller.
- How to implement an ionic table with pagination.
- How to use the ionic skeleton component.
- How to create a different ionic list.
