Custom component inside ion-header

Ionic Framework
1

I created custom header component

...
@Component({
    selector: '[hd-header]',
    templateUrl: 'header.html',
    styleUrls: ['header.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderComponent implements OnInit {
    @Input() type = '';
    @Input() pageName = '';
    @Input() showSearch = false;
    @Input() showNotifications = false;
    @Input() showBag = false;

    @select(bagProductsCountSelector) productsCount: Observable<number>;
    @select(notficationsCountSelector) notificationCount: Observable<number>;
...

and I want to insert it in ion-header without host element.

In ionic v3 this worked
<ion-header hd-header [pageName]="'Sign up'"></ion-header>

In ionic v4 it gives me error:
core.js:15723 ERROR Error: Uncaught (in promise): Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component’s selector can match a given element.
Conflicting components: IonHeader,HeaderComponent ("[ERROR ->]

Anyone can guide me to the right direction?

2

Yeah, that makes sense. You can’t instantiate two different components on the same DOM node.

What I usually do is to insert my custom component inside ion-header with just the contents that I want. It works perfectly.

Best,
Rodrigo

3

Hey @FdezRomero do you insert custom component into <ion-header></ion-header> without host element?

4

No, I use my component inside like:

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

Why do you need to include your component without a host element? Ionic needs the ion-header in order to correctly place it fixed at the top.

5

You understood me wrong let me explain, for example, I have this custom header element hd-header

@Component({
    selector: '[hd-header]',
    template: '
  <ion-toolbar>
    <ion-title>{{pageName}}</ion-title>
  </ion-toolbar>
',
    styleUrls: ['header.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderComponent implements OnInit {
    @Input() pageName = '';

And I to use this hd-header element without host element. I mean i want to render only whats inside hd-header.

This is not correct code, but maybe it will illustrate what I want to achieve.

<ion-header>
 <ng-content hd-header></ng-content>
</ion-header>
6

I see, thanks for the example. My question is why do you need to include the content directly without a parent or wrapping component. If there is a problem/need behind it or just because you like it better.

Have you tried using this component in an ng-container (which doesn’t render a parent node)? Like:

<ion-header>
 <ng-container hd-header></ng-container>
</ion-header>

I haven’t tried it myself but it might work…

7

Using this in ionic v4

<ion-header>
 <ng-container hd-header></ng-container>
</ion-header>

Gives me error

core.js:15723 ERROR Error: Uncaught (in promise): TypeError: el.setAttribute is not a function
TypeError: el.setAttribute is not a function

.
.
.

The reason is that at least In ionic v3(Haven’t tested yet ionic v4) I had problems with iphone x header styling when doing like this

<ion-header>
  <hd-header></hd-header>
</ion-header>

But overall If possible I would like to find a way to include the content directly without a parent or wrapping component, so I can keep html cleaner and html structure same as in ionic docs.

8

That error was kind of expected since the component doesn’t have a node rendered in DOM, so you can’t set attributes to it.

So maybe we should focus on solving the root cause: What are your header styling problems in iPhone X?

I have several Ionic apps in production and all look fine on my iPhone X, maybe I can help :slightly_smiling_face:

9

I am still migrating my app to ionic v4, but if everything is ok on iPhone X, I guess I will just use

<ion-header>
  <hd-header</hd-header>
</ion-header>
10

Got it :slightly_smiling_face: Let me know if you still have issues after you finished migrating to Ionic 4 :+1: