I want to use a custom header component in all pages of my app.
I generated the component with
c:\dir>ionic g component my-header
Then I changed the contents of my-header\my-header.component.html to:
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button *ngIf="hasmenu"></ion-menu-button>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
{{pagename}}
</ion-title>
</ion-toolbar>
and added the following to the class declaration in my-header\my-header.component.ts:
@Input() pagename: string;
@Input() hasmenu: number;
So far, so good: using the header as follows produces the results I wanted:
<ion-header>
<my-header pagename="Settings" hasmenu=1>
</my-header>
</ion-header>
The problem is that some pages have additional elements in the header, and I would like to use named slots in my component for this. Based on Using templates and slots - Web Components | MDN , I tried changing my-header\my-header.component.html to:
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button *ngIf="hasmenu"></ion-menu-button>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
{{pagename}}
<slot name="suffix"></slot>
</ion-title>
</ion-toolbar>
and using it as follows:
<ion-header>
<my-header pagename="Search" hasmenu=1>
<p slot="suffix">additional html code</p>
</my-header>
</ion-header>
I have, however, been unable to get it to work. In the above case, the additional html code is ignored.
Am I doing something wrong, or are slots not supported in custom-built components?
my setup is as follows:
Ionic:
Ionic CLI : 6.17.1 (C:\Users\ALFON1\AppData\Roaming\nvm\v14.17.6\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.1.4
@angular-devkit/build-angular : 13.3.5
@angular-devkit/schematics : 13.3.4
@angular/cli : 13.3.5
@ionic/angular-toolkit : 6.1.0
Capacitor:
Capacitor CLI : 3.5.1
@capacitor/android : not installed
@capacitor/core : 3.5.1
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.3
native-run : 1.5.0
System:
NodeJS : v14.17.6 (C:\Program Files\nodejs\node.exe)
npm : 6.14.15
OS : Windows 10