How to pass an inside a wrapped, by another component, ?

Question

I have wrapped an <ngx-datatable> component, inside a component of mine let's call it <app-table>, in order to use some standard configs throughout the application. The problem is that I cannot pas an <ngx-datatable-column> inside the and let it pass indside <ngx-datatable>. No errors are thrown, it just ignores the passed element.

I tried <ng-content> and <template> with TemplateRef, with no success. I suspect that <ngx-datatable> does not recognize the passed element because it has already been initialized without it.

<app-table [rows]="rows"
           [limit]="page.limit"
           [columns]="columns">
    <ng-container content>
        <ngx-datatable-column name="Actions">
            <ng-template let row="row"
                         let-value="value" 
                         ngx-datatable-cell-template>
                <button>...</button>
                <button>...</button>
            <ng-template>
         </ngx-datatable-column>
    </ng-container>
</app-table>

Inside app-table.component.ts

.
.
<ngx-datatable [configs]="...configs...">
    <!-- The column is never displayed in here -->
    <ng-content select="[content]"></ng-content>
</ngx-datatable>

Any help is appreciated, thanks in advance!

use TemplateRef to to sent template ... @ContentChild(TemplateRef) itemTemplate: TemplateRef; — Muhammad Nasir, May 21 '19 at 07:46
@MuhammadNasir Thanks for replying, but can you elaborate a little bit more? How can I pass a template and project it inside the ``? — Lefteris Panelas, May 21 '19 at 08:36

score 0 · Answer 1 · answered May 21 '19 at 10:59

You can attach a context object to the EmbeddedViewRef by setting [ngTemplateOutletContext]. [ngTemplateOutletContext] should be an object, the object's keys will be available for binding by the local template let declarations.

Change your html.

<ngx-datatable [configs]="...configs...">
    <!-- The column is never displayed in here -->
       <ng-template [ngTemplateOutlet]="itemTemplate" *ngIf="itemTemplate" 
        [ngTemplateOutletContext]="{ $implicit: option }"></ng-template>
</ngx-datatable>

Inside the ts file.Access a TemplateRef instance by placing a directive on an element (or directive prefixed with *)

  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;

pass value like this

<app-table [rows]="rows"
           [limit]="page.limit"
           [columns]="columns">
    <ng-template>
        <ngx-datatable-column name="Actions">
            <ng-template let row="row"
                         let-value="value" 
                         ngx-datatable-cell-template>
                <button>...</button>
                <button>...</button>
            <ng-template>
         </ngx-datatable-column>
    </ng-template>
</app-table>

I'm trying to use this approach but can't seem to get it working, here's my stackblitz: https://stackblitz.com/edit/angular-2tw9bq — Danyx, Mar 06 '20 at 15:51

How to pass an inside a wrapped, by another component, ?

1 Answers1

Linked