Search code examples
javascriptangulartypescriptprimeng-datatableng-template

How is templates working in primeng grid Angular 6

I am using primeng TurboTable where for templates a pTemplate directive is added. And then accordingly DOM gets rendered I am trying to implement a very same approach in my project to create a reusable(DUMB) component. Tried searching for a solution but couldn't find a proper solution. Thought about using ng-container but when passing ng-template from Smart component to child component nothing is happening. PFB a sample of the solution I tried

Smart Component Template

<dumb-component>
  <ng-template #content> Content is placed here .... </ng-template>
</dumb-component>

Dumb Component Template

<ng-container *ngTemplateOutlet="content">
</ng-container>

Link to primeng documentation : primeng docs

Solution

  • Since your component Dumb Component receives a template. It needs to access the template with @ContentChild

    Dump Component

    <ng-container *ngTemplateOutlet="content">
</ng-container>
@ContentChild(TemplateRef) content: TemplateRef<any>;

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