Need to change ionic icon color based on Network condition


#1

Hi EveryOne,’

I need to change color for ionic icons based on Network Connectivity
If it connects to Network it need to be in Green color
If it disconnect from network it need to be in red color

Any Example working code would help me lot

Thanks in Advance


#2

Here is the code for disconnected network

You need to install the plugin
$ ionic cordova plugin add cordova-plugin-network-information
$ npm install --save @ionic-native/network

import { Network } from '@ionic-native/network';
  private disconnectSubscription = this.network.onDisconnect().subscribe(() => {
    //Your logic for change the color
  });


#3

You can use network information plugin for this purpose

cordova plugin add cordova-plugin-network-information

and add Online Offline event listener for this purpose

$rootScope.$on(’$cordovaNetwork:online’, function(event, networkState){
//Write the logic to change the style of icon here for online mode
});

// listen for Offline event
$rootScope.$on(’$cordovaNetwork:offline’, function(event, networkState){
//Write the logic to change the style of icon here for offline mode
});


#4

The icon is just a font so you can change color using css as if you are changing font color dynamically within angular

Many ways to achieve that. Check this forum or google