Custom component in ion-navbar

Hi,

I 'd like to add a custom component into an ion-navbar. The component is using this template:

<ion-buttons end>
  <button ion-button (click)="toggleLang()">{{lang | uppercase}}</button>  
</ion-buttons>

When adding my component in an ion-navbar, it is misaligned, like shows the following screenshot:

The component is called mc-lang-switcher, and is integrated this way in the ion-navbar:

<ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>MTL Metro Codes</ion-title>
    <mc-lang-switcher></mc-lang-switcher>
  </ion-navbar>

If I am adding the component’s template directly in the ion-navbar, I have the expected alignment though:

<ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>MTL Metro Codes</ion-title>
    <ion-buttons end>
      <button ion-button (click)="toggleLang()">EN</button>
    </ion-buttons>
  </ion-navbar>

What would be the best approach to make this work ?

You need to put component under “ion-buttons”.

<ion-header>
  <ion-navbar>
    <ion-title>TITLE</ion-title>
    <ion-buttons end>
      <mc-lang-switcher></mc-lang-switcher >
    </ion-buttons>
  </ion-navbar>
</ion-header>

Actually, I already tried that approach, this is solving the alignment issue, but the button is not style as it should be (not flat):

15
What would you suggest to fix this ? Is there a recommended way to add custom components to ion-navbar ?

Default style should not have a shadow on button.

<button ion-button clear >EN</button>

Unfortunately this is not working. The button is there, but it takes the same color as the header background. I fill like it’s not the good approach.
59

I fixed the color issue by adding the following style:

mc-lang-switcher {
  button.button-clear { color: white;  }
}

It’s working, but it still fills broken to me to be require to add this extra style. Does anyone know a more ionic way ?