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,