ionic : How to add custom elements to header bar or add own header bar per view?

Question

I'm new to Ionic. I want to add custom items to the header bar.

It seems the header bar is generated by the framework inside the ion-nav-bar element.

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

I see, that the view-title from the tab template gets automatically put into the header bar.

<ion-view view-title="Home">

Here is the code I am working on: https://plnkr.co/edit/39XMp3FylDHofwJcFZmr?p=preview This is taken from the ionic documentation: http://ionicframework.com/docs/api/directive/ionTabs/

The header-bar documentation says, to add the header bar element before the ion-content element (see the home template), but it does not get displayed.

<ion-view view-title="Home">
  <ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">Custom Header</h1>
  </ion-header-bar>
  <ion-content class="padding">
    <p>
      <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
    </p>
  </ion-content>
</ion-view>

How can I add my own elements to the header bar, depending on currently displayed tab, or have a header bar in each template?

What it is exactly that you want to add to header? Is it text content or buttons and such? — Aditya Singh
Buttons and such (with text or an icon or both). The solution I found is already satisfactory for my purpose. Thanks. — Cranescanner

Cranescanner Cranescanner · Accepted Answer · 2016-04-17T06:35:48

After more searching I found this: http://codepen.io/calendee/pen/hIkoJ

It looks, like I have to add an ion-nav-bar to my template:

<ion-view view-title="Home">
  <ion-nav-bar class="bar-positive" align-title="center">
    <ion-nav-back-button class="button-icon ion-arrow-left-c">
    </ion-nav-back-button>
    <ion-nav-buttons side="right">
      <button class="button" ng-click="baz()">
        RightButton!
      </button>
    </ion-nav-buttons>

  </ion-nav-bar>
  <ion-content class="padding">
    <p>{{lol}}

Updated plnkr: https://plnkr.co/edit/33YSRvp2H92dbeliEaj6?p=preview

ionic : How to add custom elements to header bar or add own header bar per view?

1 Answers