Template projection as a workaround for component restrictions

angular-template-projection.ts

@Component({
  selector: 'my-page',
  template: `
    <ion-content>
      <ion-list><ion-item>My List</ion-item></ion-list>
      <my-reusable-fab (templateOutput)="rootContent = $event"></my-reusable-fab>
      <ng-template [ngTemplateOutlet]="rootContent"></ng-template>
    </ion-content>
  `
})
class MyPageComponent {
  rootContent: TemplateRef;
}

@Component({
  selector: 'my-reusable-fab',
  template: `
    <ng-template #templateContent>
      <ion-fab padding vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button>
          <ion-icon name="add"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ng-template>
  `
})
class MyReusableFabComponent {
  @Output() templateOutput = new EventEmitter();
  @ViewChild('templateContent', { static: false }) set templateContent(template: TemplateRef) {
    this.templateOutput.emit(template);
  }
}