Title Bar with Side Menu and Nav Links


#1

I’m having trouble coming up with the some encapsulated markup for a navbar.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page Title</ion-title>    
    <ion-buttons end>
      <button ion-button clear>Link 1</button>
      <button ion-button clear>Link 2</button>
      <button ion-button clear>Link 3</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

… works great and creates a layout like this:

But if I simply take the ion-buttons and try and encapsulate them in a component, and then use it like so:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page Title</ion-title>    
    <nav-links></nav-links>
  </ion-navbar>
</ion-header>

…I’m ending up with a line clearing problem, like so:

Why is that happening? What can I do to encapsulate those links in a way that doesn’t misbehave?


#2

Figured it out with the help of this: https://stackoverflow.com/questions/34280475/remove-the-host-html-element-selectors-created-by-angular-component.

Basically use an attribute selector instead of a directive on the nav-links component.