title: Angular 2 ngx-Datatable celltemplate
body: <p>I am trying to implement cellTemplates in ngx-Datatable (<a href="https://github.com/swimlane/ngx-datatable" rel="nofollow noreferrer">https://github.com/swimlane/ngx-datatable</a>) but can’t figure out why it doesn’t work.</p>
  
  <p>First my view  </p>
  
  <pre><code>&lt;ngx-datatable [rows]="skifte?.utsade" [columnMode]="flex" [selectionType]="'single'" [columns]="columns" (select)='edit($event)'&gt;&lt;/ngx-datatable&gt;
  </code></pre>
  
  <p>I have a template class like this.</p>
  
  <pre><code>import { Component, TemplateRef, ViewChild } from '@angular/core';
  @Component({
  moduleId: module.id,
  selector:'',
  template:"
  &lt;template #checkbox let-row="row" let-value="value" let-i="index"&gt;
      &lt;md-checkbox checked="value === 'true'"&gt;&lt;/md-checkbox&gt; 
  &lt;/template&gt;"
  })
  export class CellTemplates{
  
  @ViewChild('checkbox') public checkbox: TemplateRef&lt;any&gt;;
  
  constructor(){
  
   }    
  }
  </code></pre>
  
  <p>And try to use it like this. But there are no changes in style of that cell.</p>
  
  <pre><code>@Component({
  moduleId: module.id,
  selector: 'dv-utsade-table',
  templateUrl: 'UtsadeTableComponent.html'
  
  })
  export class UtsadeTableComponent extends InsatsComponentBase {
  
  columns : any[];
  constructor(private dialogService: DialogService) {
      super();
  }
  ngAfterViewInit(){
   window.setTimeout(() =&gt;
       this.columns =  [{ name: 'Körning', prop: 'korning'  },
          { name: 'benamning' },
          { name: 'giva' },
          { name: 'areal' },  
          { name: 'Utförd', prop: 'utford', cellTemplate: new CellTemplates().checkbox } //&lt;----Here,
          { name: 'datum' },
          { name: 'Huvudgröda', prop: 'huvudgroda' },
          { name: 'Gödsel', prop: 'godsel.benamning' },
          { name: 'Giva', prop: 'godsel.giva' }
          ]
      )
   }
  }
  </code></pre>