Inline template ngx-datatable-column do not work, when passed to a wrapper component via ng-content or ng-container *ngTemplateOutlet

I’m submitting a bug report

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Inline templates of <ngx-datatable-column> are not rendered inside of <ngx-datatable> tag when passed to a wrapper component like

<my-wrapper [page]="page">
<ngx-datatable-column [flexGrow]="1" name="name" ></ngx-datatable-column>
</my-wrapper>

via ng-content

<ngx-datatable 
               [rowHeight]="100"
               [columnMode]="'flex'"
               [rows]="page.items"
               [count]="page.items.length"
               [offset]="page.currentPage"
               [limit]="page.pageSize"
               [scrollbarV]="true"
               [virtualization]="false">
  <ng-content></ng-content>
</ngx-datatable>

_internalColumns are undefined, because @ContentChildren returns 0 elements.

@ContentChildren(DataTableColumnDirective)
  set columnTemplates(val: QueryList<DataTableColumnDirective>)

Expected behavior ngx-datatable have to be able to get inline column templates from ng-content, because it is needed for reuseability

Reproduction of the problem Create a wrapper component and pass ngx-datatable-column to it via ng-content;

Minimal demo can be found here https://plnkr.co/edit/m5lV9wvhrwjqrnMlq8DB?p=preview

What is the motivation / use case for changing the behavior? Wrapper components are important because of reusability. We have to be able to incapsulate helper functions as rowClass, cellClass, selected internally and only pass markup and items to the datatable.

Please tell us about your environment: Windows 10

Table version: 11.1.7 Angular version: Angular 5.2.0, Angular Cli 1.6.2

• Browser: all

• Language: all

Workaround:

I was able to insert columns via getting ContentChildren inside of wrapper component, but I think this is a dirty hack.

@ViewChild(DatatableComponent) datatable: DatatableComponent;
  @ContentChildren(DataTableColumnDirective) val: QueryList<DataTableColumnDirective>;

  ngOnInit() {
    // workaround of ng-content
    setTimeout(() => {
      this.datatable.columnTemplates = this.val;
    });
  }

[DrDager]

I think, that you want use ngx-datatable-column 1 times, without Ctrl+C/Ctrl+V every times. You can use NgTemplate.

Create component wraper for you ngx-datatable: <wrp-table-component>

.html

<div class="custom-table">
  <ngx-datatable
     ...
    [rows]="rows"
    [columns]="columns"
    ....>
  </ngx-datatable>

  <ng-template #withAvatar let-value="value" let-row="row">
    <div class="td-image">
      <img class="ng-tns-c31-112" src="{{value.imgUrl}}">
    </div>
    <span class="ng-tns-c31-112">{{value.name}}</span>
    <button class="btn btn-icon btn-icon-sm btn-icon-sm-blue ml-auto opacity-0" type="button">
      <i class="icon icon-arrow-right-small"></i>
    </button>
  </ng-template>
</div>

wrp-table.component.ts

  @Input()
  rows;

  @Input()
  cols;

ngOnChanges(changes: SimpleChanges): void {
    if (changes.hasOwnProperty('cols')) {
      this.ngOnInit();
    }
  }

  ngOnInit() {
    if (this.cols) {
      this.updateCols();
    }
  }

  updateCols(): void {
    this.columns = this.cols.map((col: any) =>  ({
      ...col,
      cellTemplate: this[col.cellTemplate],
      headerTemplate: this[col.headerTemplate]
    }));
  }

And now you can use that component:

<wrp-custom-table [rows]="rows" [cols]="cols"></wrp-custom-table>

Inside you component

rows:  = [
    {
      name: 'Rahul',
      gender: 'Male',
      company: 'Swimlane',
      partner: {
        name: 'A',
        imgUrl: 'https://runple.s3.eu-central-1.amazonaws.com/images/5db6c48fb4f15.png'
      }
    }
];
cols = [
    {
      cellTemplate: 'withAvatar',
      headerTemplate: 'hdrTpl',
      name: 'Partner',
      width: 100,
      maxWidth: 100,
      sortable: false

    }
]

[duredhel13]

This issue is not directly related to ngx-datatable. Angular does not support content projection via ng-content more than 2 levels deep. Ref: https://github.com/angular/angular/issues/8563