Request: Example of passing complex content projection

Hi,

I’m looking to use NGXD to load dynamic components and content provided by a headless CMS like Contentful, but I’ve come into a bit of an issue where I’m struggling to figure out how to use content projection with the dynamically loaded components.

I have an X Column component that can host a number of predefined components, some of which are able to take complex content using ng-content. Is this something this package can handle? And is it possible to get an example?

Here’s some demo code I’ve created to explain the situation https://stackblitz.com/edit/angular-simple-dynamic-8emvyb?file=src/app/app.module.ts

[thekiba]

Hello, @ChazUK

If you want to have using ng-content with dynamic components, you have to create projectableNodes by self. I’ll explain to you what do you need to do.

1. You have to create an <ng-template> and put an <ng-content> in it.

@Component({
  selector: 'app-x-column',
  template: `
    <!-- 👇 place TemplateRef with NgContent here -->
    <ng-template #templateRef>
      <ng-content></ng-content>
    </ng-template>
  `
})
class XColumnComponent {}

1. Then you have to get the TemplateRef using by @ViewChild() decorator.

@Component({
  selector: 'app-x-column',
  template: `
    <ng-template #templateRef>
      <ng-content></ng-content>
    </ng-template>
  `
})
class XColumnComponent {
  // 👇 getting access to the TemplateRef
  @ViewChild('templateRef', { 
    static: true, 
    read: TemplateRef
  })
  templateRef: TemplateRef<{}>;
}

1. After that you need to create a projectableNodes. In order to do this you have to create a ViewRef of the TemplateRef and get rootNodes. Don’t forget to place the projectableNodes in *ngxComponentOutlet="content: projectableNodes".

@Component({
  selector: 'app-x-column',
  template: `
    <ng-template #templateRef>
      <ng-content></ng-content>
    </ng-template>
    <ng-container *ngxComponentOutlet="
      <!-- putting 👇 projectableNodes into the content of NgxComponentOutlet -->
      component; content: projectableNodes"></ng-container>
  `
})
class XColumnComponent {
  projectableNodes: any[][];

  @ViewChild('templateRef', { 
    static: true, 
    read: TemplateRef
  })
  set templateRef(t: TemplateRef<{}>) {
    // 👇 creating projectableNodes
    this.projectableNodes = [
      t.createEmbeddedView({}).rootNodes
    ];
  };
}

1. Don’t forget to destroy the ViewRef, otherwise, this can lead to leaks.

this.viewRef = t.createEmbeddedView({});
// some later
this.viewRef.destroy();

[alQlagin]

@xeladotbe this question is out of scope for this issue. In short you can’t apply any dicrectives to html content from CMS. But you can handle link click and use Router api. See this example https://stackblitz.com/edit/angular-inner-html-links?file=src/app/app.component.ts