Adding element to header bar


#1

I’d like to add an icon to the header bar that indicates whether there is a network connection or not.

So I wrote the following controller:

.controller('AppCtrl', function($scope, $rootScope, $stateParams, $ionicPlatform) {

  $ionicPlatform.ready(function() {    

    function onGoesOnLine(){
      $scope.ConnectionOnline = true;
      console.log($scope.ConnectionOnline);
      $rootScope.$$phase || $rootScope.$apply();
    }

    function onGoesOffLine(){
      $scope.ConnectionOnline = false;
      console.log($scope.ConnectionOnline);

      $rootScope.$$phase || $rootScope.$apply();
    }

    window.addEventListener("offline", onGoesOffLine, false);
    window.addEventListener("online", onGoesOnLine, false);
    if(navigator.onLine == true) {
        onGoesOnLine();
    }
    else {
        onGoesOffLine();
    }

  });

})

It works great. But now I would like to add the actual icon in the header bar, and I’m not sure how to approach this.

I know Ionic is transitioning to a new header bar system in the 1.0 beta, but as there is no indication on when that will be landing I need something in the interim.

Anybody know of a way to inject an element into the header bar?


#2

Perhaps using an ng-class. Create a class called “online” and one “offline”. Each class would have whatever styling you like. Then

<ion-header-bar ng-class="{ 'online' : $scope.connectionStatus === 'onliine' , 'offline' : $scope.connectionStatus === 'offline' }"

#3

Thanks @Calendee. Is ion-header-bar already available in 0.9.27?


#4

Yes, it’s been around for a while now.


#5

Is this a replacement for <ion-nav-bar>?


#6

No. Header bars are simply for pages that don’t need navigation. Like a literally single view app. The nav-bar controls navigation throughout the app.

Generally speaking, you probably need an <ion-nav-bar> for most cases.

http://ionicframework.com/docs/angularjs/controllers/view-state/