Ngx-datatable: feat: Demo example for TemplateRef cellTemplate use

[eddy-geek]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here

Current behavior
Doc is a bit elusive on how to use json column definitions where cellTemplates are involved

Expected behavior
Here is what the demo code could look like (this is adapted from the first demo)

import { Component, ViewChild, TemplateRef, OnInit } from '@angular/core';

@Component({
  selector: 'template-templateref-demo',
  template: `
    <div>
      <h3>
        TemplateRef cellTemplate
        <small>
          <a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/template/templateref.ts" target="_blank">
            Source
          </a>
        </small>
      </h3>
      <ngx-datatable
        class="material"
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'">
      </ngx-datatable>
      <ng-template #sampleT let-row="row" let-value="value" let-i="index">
        templated {{value}}
      </ng-template>
    </div>
  `
})
export class BasicAutoComponent implements OnInit {

  @ViewChild('sampleT') public sampleT: TemplateRef<any>;

  rows = [];

  columns = [
    {
      prop: 'name',
      cellTemplate: this.sampleT
    },
    { name: 'Gender' },
    { name: 'Company' }
  ];

  constructor() {
    this.fetch((data) => {
      this.rows = data;
    });
  }

  ngOnInit() {

    this.columns = [
      {
        prop: 'name',
        cellTemplate: this.sampleT
      },
      { name: 'Gender' },
      { name: 'Company' }
    ];

  }
  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/data/company.json`);

    req.onload = () => {
      cb(JSON.parse(req.response));
    };

    req.send();
  }

}

[eddy-geek]

Note that something especially tricky for beginners is the need to reapply the TemplateRef in ngOnInit as it doesn't exist before.

[adammedford]

It isn't really clear what you are asking for. I think a demo should focus on demonstrating the specifics of this library rather than the implications of Angular's component life cycle. It is helpful but there are plenty of resources already available through other venues to teach you about AfterViewInit and other Angular specific topics. However, there isn't a wealth of external information available about this project.

[eddy-geek]

Well, the point is, the docs say column.cellTemplate accepts a TemplateRef, but don't mention how/when to get one, though it's a pretty common need when declaring your columns as json (e.g. to reuse the definition).

Of course this issue, even when closed, might already be enough for someone searching for the solution :)

[amcdnl]

Closing given comments above.

[padilla-jm]

Thank you so much @eddy-geek, after way too much time spent searching your code really helped me.

[jdhenckel]

Helped me!!!

[bberkobien]

I did this but it still didn't work

[HiImJulien]

Sadly, {{ value }} seems to be undefined for me in this context.
Anyone else having trouble with this?

[DeeeFOX]

wow! it does help me!!!

should init again in ngOninit() function:

ngOnInit() { this.columns = [ { prop: 'name', cellTemplate: this.sampleT }, { name: 'Gender' }, { name: 'Company' } ]; }