1

I am trying to create a component that reuses ion-header. With the way ion-header works, it needs to be a root component of the page (contained by nothing except body). I have looked into a couple of ways to do this:

I have created a component with an attribute selector:

@Component({
  selector: '[head]',
  template: `<ion-header>... {{head}} ...</ion-header>`,
})
export class HelloComponent  {
  @Input() head: string;
}

However, if I try to use <ng-container head="The Title"></ng-container> I get an error: DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. from the Angular renderer itself.

I can update the template to include the content of ion-header itself and instead have <ion-header head="The Title"></ion-header>, but I would like to be able to reuse the component as a whole rather than having to specify the element and directive. This also prevents me from being able to include other attributes with ion-header if it's needed.

Example: https://stackblitz.com/edit/angular-fgfudn

Is there any way to render a component's template contents at the root level?

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405

1 Answers1

0

Well, there is one convoluted way to do that, your component should have ng-template with ion-header. Then you create embedded view manually using component factory/resolver. This way you can render ng-template with ion-header right after your component tag (which can have display: none for example) on the same level.

kemsky
  • 14,727
  • 3
  • 32
  • 51