Custom Header Component

Ionic Framework ionic-v3
#1

I am using Ionic 3 … Trying to create a custom header object.

Goal is to just put <myheader></myheader> on all my pages, so I don’t have to recreate the wheel each time.

This is a lot harder in Ionic 3 then in Ionic v1. Declaring , Importing .forRoot or .forChild … Hard to grasp when you’re just getting started with Ionic 2+. Each time my CLI updates … the damn thing does something completely different. Sometimes it creates a component with a .module.ts before it didn’t … NOW! it creates 1 component.module.ts. So wow! idk.

Not trying to rant … but I am lost on what is happening so I can pinpoint the problem.

It works on the homepage … but doesn’t work on any other page. I see the tags for the <myheader> but it doesn’t render any content. I have a console.log() in the component just to see if it fires… and it doesn’t on the non-root pages.

Willing to paypal someone $ to help me solve this issue. Clearing I am f-ing this up.

2 Likes
#2

As far as I know ion-header and Co don’t really like being put into custom components.

3 Likes
#3

Why can’t you just put this into app.html?

#4

Instead of fighting the tide it’s a lot easier to go with it.

Create the component…

ionic g component MyHeader

Make sure it’s in the components.module.ts

Import that components.module into the page(s) you want to use it. (Into their .module.ts file)

Add it…

<my-header></my-header>

Or rapropos’s advice is totally sound

#5

I also want to changed the submenu … so I thought i could do it with one component.

I took Sujan’s advice … And just put it on every page. Wasted 3 days trying to get it to work and the fact is it just doesn’t like having ion-header in a component.

#6

Sorry, but I still don’t understand why you couldn’t just put whatever you were trying to put in this component into app.html and the app component.

#7

Thx, it’s working for me but for some reason the content goes under the header…
Do you know how can I fix this ?

1 Like
#8

Same issue with me. how to fix this?

#9

Same issue as mine (header going over the content) ?
Didn’t have any answer yet

Or same issue as edriven (trying to include the custom header) ?
Judgewest2000’s answer works well

#10

See: Custom components missing ionic directives

#11

Thnks,

I’m sorry if I didn’t understand well but it doesn’t seem to work. I did this (components.module.ts) :

import { FormsModule } from '@angular/forms';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from 'ionic-angular';

// Components importation
import { MainHeaderComponent } from './main-header/main-header';

@NgModule({
	declarations: [
		MainHeaderComponent
	],
	imports: [
		CommonModule,
		FormsModule,
		IonicModule
	],
	exports: [
		MainHeaderComponent
	],
	schemas: [
	  CUSTOM_ELEMENTS_SCHEMA
	]
})
export class ComponentsModule {}

But the header is still over the content of the body…

#12

Hi,

It still doesn’t work for me, the header components goes over the content of the website.

Can you explain the solution please ?

Regards,