feat: Demo example for TemplateRef cellTemplate use

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]

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 😃

[eddy-geek]

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