Ionic2 Network Connection no logs displayed inside OnConnect() and onDisconnect() method

Question

I'm learning ionic2. I'm working with a Network Connection.I referred code from this link Ionic2 Network Connection.But I'm not getting any logs or alert from OnConnect() and onDisconnect() method.

.ts file(code)

import { Component } from '@angular/core';
import { NavController, NavParams, IonicPage } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
import { Http } from '@angular/http';
import { LoadingController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { NativeStorage } from '@ionic-native/native-storage';
import { AlertController } from 'ionic-angular';
import { Ionic2RatingModule } from 'ionic2-rating';
import 'rxjs/add/operator/map';
import { Network } from '@ionic-native/network';

@IonicPage()
@Component({
  selector: 'page-outlet',
  templateUrl: 'outlet.html',
})
export class OutletPage {
    constructor(private storage: Storage,public navParams: NavParams,public alertCtrl: AlertController,public http: Http,public loadCtrl: LoadingController,public toastCtrl: ToastController,public nativeStorage: NativeStorage, public nav: NavController,private network: Network) {
    this.loaddata();

            var networkState = this.network.type;
           let alert1 = this.alertCtrl.create({
               title: "Connection Status",
               subTitle: networkState,
               buttons: ["OK"]
           });
           alert1.present();


        // watch network for a disconnect
        let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
        console.log('network was disconnected :-(');
        });

        // stop disconnect watch
        disconnectSubscription.unsubscribe();

        // watch network for a connection
        let connectSubscription = this.network.onConnect().subscribe(() => {
        console.log('network connected!');
        // We just got a connection but we need to wait briefly
        // before we determine the connection type. Might need to wait.
        // prior to doing any api requests as well.

        setTimeout(() => {
        console.log(this.network.type);
        if (this.network.type === 'wifi') {
        alert('we got a wifi connection, woohoo!');
             }
        }, 3000);
        });

        // stop connect watch
        connectSubscription.unsubscribe(); 

        }

        loaddata(){ 
                let headers  = new Headers({ 'Content-Type': 'application/json' });

                this.http.get("http://aryvartdev.com/reload/api/ApiController/categorylist",headers)
                .map(res => res.json())
                .subscribe(data => {
                this.rescall=data.message.product_category;
                console.log("-this-"+JSON.stringify(this.rescall));
                this.rows = Array.from(Array(Math.ceil(this.rescall.length / 2)).keys());
                        this.rowsLen=this.rows.length;
            console.log("row--len--"+this.rowsLen);     
                }, error => {

                console.log(error);// Error getting the data
                });

            }
        }

I gave this code inside my .ts constructor method and its working fine. It will only show the network type.

Can anyone help me why those two methods are not working?

Answer 1

   import { Component } from '@angular/core';
    import { NavController, NavParams, IonicPage } from 'ionic-angular';
    import { ToastController } from 'ionic-angular';
    import { Http } from '@angular/http';
    import { LoadingController } from 'ionic-angular';
    import { Storage } from '@ionic/storage';
    import { NativeStorage } from '@ionic-native/native-storage';
    import { AlertController } from 'ionic-angular';
    import { Ionic2RatingModule } from 'ionic2-rating';
    import 'rxjs/add/operator/map';
    import { Network } from '@ionic-native/network';

    @IonicPage()
    @Component({
      selector: 'page-outlet',
      templateUrl: 'outlet.html',
    })
    export class OutletPage {
        constructor(private storage: Storage,public navParams: NavParams,public alertCtrl: AlertController,public http: Http,public loadCtrl: LoadingController,public toastCtrl: ToastController,public nativeStorage: NativeStorage, public nav: NavController,private network: Network) {
        this.loaddata();

                var networkState = this.network.type;
              this.presentAlert(networkState)


            // watch network for a disconnect
            let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
            this.presentAlert('network was disconnected :-(');
            });

            // stop disconnect watch
            //disconnectSubscription.unsubscribe();

            // watch network for a connection
            let connectSubscription = this.network.onConnect().subscribe(() => {
            this.presentAlert('network connected!');
            // We just got a connection but we need to wait briefly
            // before we determine the connection type. Might need to wait.
            // prior to doing any api requests as well.

            setTimeout(() => {
            this.presentAlert(this.network.type);
            if (this.network.type === 'wifi') {
            this.presentAlert('we got a wifi connection, woohoo!');
                 }
            }, 3000);
            });

            // stop connect watch
            //connectSubscription.unsubscribe(); 

            }

            loaddata(){ 
                    let headers  = new Headers({ 'Content-Type': 'application/json' });

                    this.http.get("http://aryvartdev.com/reload/api/ApiController/categorylist",headers)
                    .map(res => res.json())
                    .subscribe(data => {
                    this.rescall=data.message.product_category;
                    console.log("-this-"+JSON.stringify(this.rescall));
                    this.rows = Array.from(Array(Math.ceil(this.rescall.length / 2)).keys());
                            this.rowsLen=this.rows.length;
                console.log("row--len--"+this.rowsLen);     
                    }, error => {

                    console.log(error);// Error getting the data
                    });

                }
            }

presentAlert(type) {
  let alert = this.alertCtrl.create({
    title: 'You are connected to ',
    subTitle: type,
    buttons: ['Dismiss']
  });
  alert.present();
}