Custom component not working properly inside <ion-header>

Ionic Framework ionic-v3
1

Hi everyone,
I’m having a problem using a custom component inside on my ionic2 pages, apparently elements using ionic directives are not properly styled inside elements,
Here is my custom component:

menu-button.component.html

<ion-buttons right>
        <button ion-button primary> Test</button>
        <button ion-button menuToggle primary>
                <ion-icon name="menu"></ion-icon>
        </button>
</ion-buttons>

menu-button.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'app-menu-button',
    templateUrl: './menu-button.component.html',
})
export  class MenuButtonComponent{
    
}

And, the page using it (just to show you whats happening):

<ion-header>
  <ion-navbar>
    <app-menu-button></app-menu-button>
    <ion-title>Map</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <app-menu-button></app-menu-button>
</ion-content>

Result:

image

I was expecting for the menu icon to be aligned on the the same line as the title, and on right, besides “Test” button. Any idea why would this be happening?

Ionic Info:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.5
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.1
Xcode version: Not installed

Thanks in advance!

2

Try this template for the header. I hope it helps.

<ion-header >
  <ion-navbar color="dark" align-title="center">
    <ion-title center>
      <h2>Map</h2>
    </ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="openModal()">
        <ion-icon name="information-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
3

I imagine it’s probably because the <ion-navbar> is looking for a direct child <ion-buttons>… maybe try putting the component inside the <ion-buttons>?:

<ion-header>
  <ion-navbar>
    <app-menu-button></app-menu-button>
    <ion-title>Map</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-buttons start>
    <app-menu-button></app-menu-button>
  <ion-buttons>
</ion-content>
4

Hi!

If you have a ComponentsModule try putting the IonicModule on imports like this:

import { IonicModule } from 'ionic-angular/module';
@NgModule({
	...
	imports: [IonicModule],
...

})
export class ComponentsModule { }
1 Like
5

That helps, thanks for info.