Looking to verify network connectivity with an alert in Ionic 2. While this guide was helpful, it is quite outdated now and Ionic 2 syntax has evolved. Despite modifying the Alert component as suggested in the comments, I'm still encountering errors. Any suggestions?
HomePage.ts
import {Component} from '@angular/core';
import {NavController, AlertController, Platform} from 'ionic-angular';
declare var navigator: any;
declare var Connection: any;
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor(private navCtrl: NavController, private platform: Platform, public alertCtrl: AlertController) { }
checkNetwork() {
this.platform.ready().then(() => {
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.CELL] = 'Cell generic connection';
states[Connection.NONE] = 'No network connection';
let alert = alertCtrl.create({
title: "Connection Status",
subTitle: states[networkState],
buttons: ["OK"]
});
this.navCtrl.present(alert);
});
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Network Check
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button (click)="checkNetwork()">Check Network</button>
</ion-content>
The error messages from home.ts
Cannot find name 'alertCtrl' - Line 26 Property 'present' does not exist on type 'NavController' - Line 31