Navbar with default button on every page

Ionic Framework ionic-v3
1

Hello,

I’d like to have a logout button inside my navbar on all pages, but I don’t want to redeclare this button all the time. Therefore, I created a component that looks like this:

@Component({
  selector: 'top',
  template: `
  <ion-header>
    <ion-navbar>
      <ng-content></ng-content>
      <ion-buttons end>
        <button (click)="presentPopover($event)">
          <ion-icon name="more"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>
  </ion-header>`
})
export class TopComponent {
}

which I then can use using:

<top>
  <ion-title>{{ person.name }}</ion-title>

  <ion-buttons end>
    <button>
      <ion-icon name="contact"></ion-icon>
    </button>
    <button>
      <ion-icon name="trash"></ion-icon>
    </button>
  </ion-buttons>
</top>

However, it does not work as expected, as you can see in the screenshot:

The reason for this is that apparantly wraps the content in an extra element (div.toolbar-content) and that the buttons inside ng-content get different class names (“button button-default button-icon-only” instead of “bar-button bar-button-default bar-button-icon-only”).

How can I add a default button on every page?

2

i had a similar experience, and too created a component to solve the problem.

I ended up moving out ion-header outside the component;
<ion-header> <title-bar></title-bar> </ion-header>

3

Thank you for your quick response! I did as you said and this resolves the positioning issue. However, the styling issue due to different button classes remains:

This is the code I used:

@Component({
  selector: 'top',
  template: `
      <ion-navbar>
        <ng-content select="ion-title"></ng-content>
        <ion-buttons end>
          <ng-content select="button"></ng-content>
          <button (click)="presentPopover($event)">
            <ion-icon name="more"></ion-icon>
          </button>
        </ion-buttons>
      </ion-navbar>
  `
})
export class TopComponent {

and:

<ion-header>
  <top>
    <ion-title>{{ person.name }}</ion-title>
    <button class="foo">
      <ion-icon name="contact"></ion-icon>
    </button>
    <button>
      <ion-icon name="trash"></ion-icon>
    </button>
  </top>
</ion-header>

I tried around a lot, moving in or out some tags, but I can’t get it to work :frowning:

4

I found a solution here:

<button category="bar-button"> does the trick

1 Like