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 ?