Ionic-framework: <ion-header> inside a custom component

[Tusharbalar]

Short description of the problem:
The <ion-header> component does not work if it is used inside a custom component

What behavior are you expecting?
When using the <ion-header><ion-navbar></ion-navbar></ion-header> component separate, its showing proper navbar for android and ios.

When I use the exact same code inside a custom component and I create an <nl-navbar></nl-navbar> , not showing proper navbar for android and ios

Steps to reproduce:

1. create an ionic project, version 2
2. create a component with the following template:

    @Component({
    selector: 'nl-navbar',
    template: `
        <ion-header>
          <ion-navbar color="primary">
            <button ion-button menuToggle>
              <ion-icon name="menu"></ion-icon>
            </button>
            <ion-title >
              <span>Complaints</span>
            </ion-title>
            <ion-buttons *ngIf="!hideCreateButton" end>
              <button ion-button class="navBtnRight" (click)="openPopover($event)">
                <ion-icon name="md-more"></ion-icon>
              </button>
            </ion-buttons>
          </ion-navbar>
        </ion-header>
    `,
    inputs: ['hideCreateButton']
})

export class CustomNavbar {

    public hideCreateButton: string;
    constructor(public popoverCtrl: PopoverController) {  }

    openPopover(myEvent) {
      let popover = this.popoverCtrl.create(PopoverPage);
      popover.present({
        ev: myEvent
      });
    }
}

1. on a page, create a <nl-navbar></nl-navbar> that includes the component you created on step 2
2. run ionic serve --lab

Ionic Info:

• Cordova CLI: 6.4.0
• Ionic Framework Version: 2.0.0-rc.3
• Ionic CLI Version: 2.1.8
• Ionic App Lib Version: 2.1.4
• Ionic App Scripts Version: 0.0.45
• ios-deploy version: Not installed
• ios-sim version: Not installed
• OS: Linux 4.6
• Node Version: v4.6.0

Current behavior:
Not showing proper header (height varient in ios only)

Expected behavior:
It should show nice header with primary background

[royipressburger]

@Tusharbalar hi. From what I know an ionic page can handle ion-content ion-headerand ion-footer.
That means that you cant wrap them with custom component. What you can do is something like that

<ion-header>
    <my-header></my-header>
</ion-header>

And the in my header put all your code with the ion-nav

[Tusharbalar]

Hello @royipressburger , I want to create custom header it wraps <ion-header></ion-header>.

Same as <ion-footer></ion-footer>

Ex:

 @Component({
    selector: 'nl-navbar',
    template: `
        <ion-header>
          <ion-navbar color="primary">
            <button ion-button menuToggle>
              <ion-icon name="menu"></ion-icon>
            </button>
            <ion-title >
              <span>Complaints</span>
            </ion-title>
            <ion-buttons *ngIf="!hideCreateButton" end>
              <button ion-button class="navBtnRight" (click)="openPopover($event)">
                <ion-icon name="md-more"></ion-icon>
              </button>
            </ion-buttons>
          </ion-navbar>
        </ion-header>
    `,

Is should create <nl-navbar></nl-navbar>.

[royipressburger]

You cant. You need to wrap the ion-nav and then put you custom component inside the ion-header

[Tusharbalar]

@royipressburger it works fine in android device but in ios device it change some looks.

i think Navbar and statusBar combined. Please check it.

[moldstadt]

I worked around this problem by adding the following css:
ion-navbar.toolbar.toolbar-ios-primary.statusbar-padding {
padding-top: 20px;
}
.toolbar-title.toolbar-title-ios {
margin-top: 20px;
}

[Tusharbalar]

Hello @moldstadt ,
Thanks for replying. It works for me but i have to wrap most of the component to my custom component with additional features because same component rendered everywhere in my project.

Ex:

@Component({
  selector: 'nl-edit-button',
  template: `
    <button ion-button color="edit" (click)="openEditModal(complaint)" *ngIf="complaint.statusId != 6 && complaint.statusId != 4">
      <ion-icon name="md-create"></ion-icon>
      Edit
    </button>
  `
})

In above example it create <nl-edit-button></nl-edit-button>.
It works fine in android device but not in ios.

I am using custom component like this:

<ion-item-options side="right">
  <nl-edit-button [complaint]="complaint" (edit)="openEditModal($event)"></nl-edit-button>
</ion-item-options>

[Tusharbalar]

Finally found solutions for that,

@Component({
  selector: 'nl-edit-button',
  template: `
    <div style="height:100%">
      <button ion-button color="edit" (click)="openEditModal(complaint)" *ngIf="complaint.statusId != 6 && complaint.statusId != 4">
        <ion-icon name="md-create"></ion-icon>
        Edit
      </button>
    </div>
  `
})

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.