angular dynamic component with nested components

1
votes

I am building an app that is basically a e-book. Each page has the same outer formatting with unique content which is defined using HTML and custom components.

The outer page is defined as:

<header></header>
  <outerborder>
    <page-content></page-content>
  </outerborder>
<footer><footer>

page-content has the template of

<div>
  <p class="title">{{title}}</p>
  <ng-content></ng-content>
  <p class="pageno">{{pageno}}</p
</div>

one of the page-content elements is then defined as 

<page-content title="title1" pageno="6">
  <p>introduction</p>
  <custom-comp1>more text</custom-comp1>
  <custom-comp2>and more text</custom-comp2>
  <button>button text</button>
</page-content>

I have been following the guide at https://angular.io/guide/dynamic-component-loader and I want to use this guide to load page-content dynamically.

How can the page-content component be defined such that the inner contents are mapped into the ng-content element? Should ng-template be used instead?

Has any one done anything similar where all the page-content elements are stored in the assets directory and loaded at dynamically?

Thank you very much for any assistance.

1
angularangular-components

1 Answers

0
votes

Passing the content as projectableNodes should do that

let content = document.createElement('div');
content.innerHTML = `
  <p>introduction</p>
  <custom-comp1>more text</custom-comp1>
  <custom-comp2>and more text</custom-comp2>
  <button>button text</button>
`;

let componentRef = viewContainerRef.createComponent(componentFactory, {projectableNodes: [content]});

See also https://stackoverflow.com/a/40323785/217408