Cordova-plugin-network-information with typescript

Ionic Framework ionic-v3
1

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();
        });
    }

 
}
2

Hi , any update on this ?

3

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

4

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
5

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.

image
Screenshot_20170329-114707.png720Ɨ1280 72.2 KB

6

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