Does anyone know how to show a modal wich shows a network connection error?

Ionic Framework ionic-v3
1

Hi guys!

I want to show a modal like this:

image
image311×552 12.9 KB

To check network connection I found this code:

In a new provider (network provider):

import { Injectable } from ‘@angular/core’;
import { AlertController, Events } from ‘ionic-angular’;
import { Network } from ‘@ionic-native/network’;

export enum ConnectionStatusEnum {
Online,
Offline
}

@Injectable()
export class NetworkProvider {

previousStatus;

constructor(public alertCtrl: AlertController,
public network: Network,
public eventCtrl: Events) {

console.log('Hello NetworkProvider Provider');

this.previousStatus = ConnectionStatusEnum.Online;

}

public initializeNetworkEvents(): void {
    this.network.onDisconnect().subscribe(() => {
        if (this.previousStatus === ConnectionStatusEnum.Online) {
            this.eventCtrl.publish('network:offline');
        }
        this.previousStatus = ConnectionStatusEnum.Offline;
    });
    this.network.onConnect().subscribe(() => {
        if (this.previousStatus === ConnectionStatusEnum.Offline) {
            this.eventCtrl.publish('network:online');
        }
        this.previousStatus = ConnectionStatusEnum.Online;
    });
}

}

And in app components:

import { Component } from ‘@angular/core’;
import { Platform, Events } from ‘ionic-angular’;
import { Network } from ‘@ionic-native/network’;
import { NetworkProvider } from ‘…/providers/network/network’;

@Component({
templateUrl: ‘app.html’
})

export class MyApp {

    constructor(public platform: Platform, 
                public events: Events,
                public network: Network,
                public networkProvider: NetworkProvider) { }

    initializeApp() {

        this.platform.ready().then(() => {

            this.networkProvider.initializeNetworkEvents();

       		// Offline event
		    this.events.subscribe('network:offline', () => {
		        alert('network:offline ==> '+this.network.type);    
		    });

		    // Online event
		    this.events.subscribe('network:online', () => {
		        alert('network:online ==> '+this.network.type);        
		    });

        });
    }

}

This code works with alerts, but I want to show the modal just when user is offline. Does anyone know how to do it?