Custom component in ion-navbar

@Mic75 wrote:

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:

localhost_8100_(Galaxy S5).png1080x1920 64.2 KB

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>

localhost_8100_(Galaxy S5)_good.png1080x1920 63.1 KB

What would be the best approach to make this work ?

Posts: 2

Participants: 2

Read full topic