Adding element to header bar

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;
      $rootScope.$$phase || $rootScope.$apply();

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

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

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



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?

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' }"

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

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

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

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.