Dynamic text within ion-header-bar directive

Question

I use ion-header-bar directive - such that the left side is class="button" , the middle is <h1> ("Recent" word) and the right is - <ng-icon> .

The text on the left side is dynamically ( i18 driven) , and it cause to the middle section to move right (if I set the left side as coast text it works well)

<ion-header-bar  class="bar bar-header bar-stable" no-tap-scroll="true">
    <a class="button icon-left ion-chevron-left button-clear button-positive">{{'homePage' | i18n}}
    </a>
    <h1 class="title">Recent</h1>
    <ng-icon type="messenger-left-header-icons" non-pressable="true" class="icon_plus"></ng-icon>
</ion-header-bar>

How it works well -

How it works bad -

How could I fix with dynamic text as well ?

Answer 1

Use this structure within header, enlose left and right buttons or icons.

<ion-header-bar  class="bar bar-header bar-stable" no-tap-scroll="true">
  <div class="buttons">
      <a class="button icon-left ion-chevron-left button-clear button-positive">{{'homePage' | i18n}}</a> 
  </div>
  <h1 class="title">Recent</h1>
  <div class="buttons">
    <ng-icon type="messenger-left-header-icons" non-pressable="true" class="icon_plus"></ng-icon>
  </div>
</ion-header-bar>