Cordova-plugin-network-information with typescript

Hi!,
I see this tutorial to determine network availability in ionic2: https://www.thepolyglotdeveloper.com/2016/01/determine-network-availability-in-an-ionic-2-mobile-app/

but I got an error on line 70 with the .type

import { NavController, Alert, Platform, LoadingController, AlertController } from 'ionic-angular';
import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { AuthData } from '../../providers/auth-data';
import { HomePage } from '../home/home';
import { EmailValidator } from '../../validators/email';

declare var navigator: any;
declare var Connection: any;

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  public loginForm;
  emailChanged: boolean = false;
  passwordChanged: boolean = false;
  submitAttempt: boolean = false;
  loading: any;

  constructor(public nav: NavController, public authData: AuthData, 
    public formBuilder: FormBuilder, public alertCtrl: AlertController, 
    public loadingCtrl: LoadingController, private platform: Platform) {

    this.loginForm = formBuilder.group({
      email: ['', Validators.compose([Validators.required, EmailValidator.isValid])],
      password: ['', Validators.compose([Validators.minLength(6), Validators.required])]
    });
  }

  elementChanged(input){
    let field = input.inputControl.name;
    this[field + "Changed"] = true;
  }

  loginUser(){

    this.submitAttempt = true;

    if (!this.loginForm.valid){
      console.log(this.loginForm.value);
    } else {
      this.authData.loginUser(this.loginForm.value.email, this.loginForm.value.password).then( authData => {
        this.nav.setRoot(HomePage);
      }, error => {
        this.loading.dismiss().then( () => {
          let alert = this.alertCtrl.create({
            message: error.message,
            buttons: [
              {
                text: "Ok",
                role: 'cancel'
              }
            ]
          });
          alert.present();          
        });
      });

      this.loading = this.loadingCtrl.create({
        dismissOnPageChange: true,
      });
      this.loading.present();
    }
  }
  
  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 = this.alertCtrl.create({
                title: "Connection Status",
                subTitle: states[networkState],
                buttons: ["OK"]
            });
            alert.present();
        });
    }

 
}

Hi , any update on this ?

Don’t run this example in a browser or use navigator.connection only if(navigator.connection) equals to true…

this code isn’t typescript, nor make it usage of the cordova network-plugin…

KR

Pitt

Follow this https://ionicframework.com/docs/v2/native/network/.

This is my service to launch dialog in ionic 2 when the device is offline. I use ngrx to display alerts, I send the alert config to my ngrx when disconnect.
To get network type only need to do the next : Network.type

import { Network } from 'ionic-native';
@Injectable()
export class NetworkService {
  public disconnect: boolean = false;

  constructor(
    private store: Store<IAppState>,
    private alertActions: AlertActions,
    private navService: NavService
  ) {
    Network.onDisconnect().subscribe(() => {
      this.disconnect = true;
      this.onDisconnect();
    });
    Network.onConnect().subscribe(() => {
      this.disconnect = false;
    });
  }
  onDisconnect() {
    let options: AlertOptions = {
      title: NETWORK_ALERT.TITLE,
      message: NETWORK_ALERT.MESSAGE,
      buttons: [
        {
          text: NETWORK_ALERT.BUTTON_CONFIRM,
          handler: () => { this.navService.setRoot(ExamListPage); }
        }
      ]
    };
    let action = this.alertActions.showAlert(options);
    this.store.dispatch(action);
  }
}

In your case:
import { Network } from ā€˜ionic-native’;
…
checkNetwork() {
this.platform.ready().then(() => {
var networkState = Network.type;
let alert = this.alertCtrl.create({
title: ā€œConnection Statusā€,
subTitle: networkState,
buttons: [ā€œOKā€]
});
alert.present();
});
}

PD: I am using ionic 2 rc 4 and now rc 5

1 Like

Hi, i’m using your code service, but i’m running into some issues, Below is my code.
HomePage.ts

export class HomePage {
  public online:boolean=false;
constructor(private network:NetworkProvider) {
    this.network.onConnect().subscribe(res=>{
      this.online=true;
      console.log(this.online);
    });

    this.network.onDisconnect().subscribe(res=>{
      this.online=false;
      console.log(this.online);
    });

}

HomePage.html footer
<ion-footer *ngIf="!online" class="footer"> <ion-toolbar> <ion-row wrap no-padding> <ion-col width-100> <ion-label>Offline</ion-label> </ion-col> </ion-row> </ion-toolbar> </ion-footer>

It shows this of first run but changing the network doesn’t change anything, though it logs the network changes in the backend.

Hi, are you sure you’re using Ionic 3, not Ionic 2, because if you were on Ionic 3, you would have to instead run:

$ ionic cordova plugin add cordova-plugin-network-information
$ npm install --save @ionic-native/network