Hi all, in this example you can set a condition to check your internet is connected or not please follow the below steps
First Create A new Project
ionic start AppName blank --type=angular
Note: In this example i used Tabs in App
Now Create a Modal Page
ionic g page /modals/modal-page
Now Create a Provider
ionic generate provider ConnectivityProvider
Note: Make sure your provider is present in Provider Array in app.module.ts file
ConnectivityProvider:
import { Injectable } from '@angular/core';
import { Observable, fromEvent, merge, of} from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class ConnectivityProvider {
public appIsOnline$: Observable<boolean>;
constructor() {
this.initConnectivityMonitoring();
}
private initConnectivityMonitoring() {
if (!window || !navigator || !('onLine' in navigator)) return;
this.appIsOnline$ = merge(
of(null),
fromEvent(window, 'online'),
fromEvent(window, 'offline')
).pipe(map(() => navigator.onLine))
}
}
Modal Page:
HTML:
<ion-content>
<ion-header>
<ion-toolbar>
<ion-title>Offline</ion-title>
</ion-toolbar>
</ion-header>
<ion-grid>
<ion-row>
<ion-col size="12">
<h1>Your phone is offline now</h1>
</ion-col>
</ion-row>
</ion-grid>
<ion-button expand="full" (click)="dismiss()">Close</ion-button>
</ion-content>
TS:
import { Component, OnInit } from '@angular/core';
import { ModalController,ToastController } from '@ionic/angular';
import { ConnectivityProvider } from 'src/app/connectivity-provider.pipe';
@Component({
selector: 'app-modal-page',
templateUrl: './modal-page.page.html',
styleUrls: ['./modal-page.page.scss'],
})
export class ModalPagePage implements OnInit {
constructor(
public modalController: ModalController,
private connectivityProvider: ConnectivityProvider,
public toastController: ToastController) { }
ngOnInit() {
}
dismiss() {
this.connectivityProvider.appIsOnline$.subscribe(online => {
console.log(online)
if (online) {
this.modalController.dismiss({
'dismissed': true
});
} else {
this.presentToast('Your phone is still offline, please on your data connection');
}
})
}
async presentToast(msg) {
const toast = await this.toastController.create({
message: msg,
duration: 2000
});
toast.present();
}
}
AppComponent:
import { Component } from '@angular/core';
import { ConnectivityProvider } from './connectivity-provider.pipe';
import { AlertController, ModalController } from '@ionic/angular';
import { ModalPagePage } from './Modal/modal-page/modal-page.page';
declare var window;
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor(
private connectivityProvider: ConnectivityProvider,
public alertController: AlertController,
public modalController: ModalController) {
this.connectivityProvider.appIsOnline$.subscribe(online => {
console.log(online)
if (online) {
} else {
this.presentModal()
}
})
}
async presentModal() {
const modal = await this.modalController.create({
component: ModalPagePage
});
return await modal.present();
}
}
Comments
Post a Comment