Ionic 3,4 Android like Loader Spinner Dialog with Title and Message

In this post, we will discuss How to Implement Native like Loader Spinner with Title and message. We already have Ionic component to show spinner with customized spinners. But to make an Ionic application look more like native we can add loading spinners as we see in Android app using Ionic Native plugin.

We will create a new app to demonstrate implementation of Native-like spinner in Ionic Application in few steps.

Also Read: Ionic 4 | Adding Ion Loading Web Component in Ionic 4 Angular Application without Native Plugin

Create a new Ionic App using below CLI command

$ ionic start IonicSpinner blank

Install Cordova and Ionic Native plugin

$ ionic cordova plugin add cordova-plugin-native-spinner
$ npm install @ionic-native/spinner-dialog

Next, we need to import plugin in app’s module file

In app.module.ts file add SpinnerDialog like below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { SpinnerDialog } from '@ionic-native/spinner-dialog/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    SpinnerDialog,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

In the Home Component and template make following changes to use Spinner Loader

home.page.ts

import { Component } from '@angular/core';

import { SpinnerDialog } from '@ionic-native/spinner-dialog/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private spinnerDialog: SpinnerDialog) { 
    this.spinnerDialog.show("title", "message", false);
  }

}

Use this.spinnerDialog.show();  to show spinner in center without any message and this.spinnerDialog.hide();  to hide it.

We have three parameters to show Title, Message and Third one is a boolean which can be set to true and false to dismiss on touch or not.

this.spinnerDialog.show(“title”, “message”, true);