Can I use slots in my custom-built ionic components?

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

Thanks but I am aware of this. I tried to use slots according to the MDN specs, without success so far. The question is, has anyone successfully used slots in their custom-built components in ionic (and are they even supposed to work?)

personally I never had the need to use slots like in your current situation but
heres an old post about slots Josh Morony made and should point you in the right direction. It should still be doable.

Thanks again. I have read this article, but have not found it helpful. It does, however, contain the following sentences: " NOTE: Remember that this is a feature of web components, you would not be able to use this directly in your own components in an Ionic/Angular application. If you are using Stencil to build your own web components, then you could use this feature." Unfortunately, it doesn’t elaborate.