Angular ngx-datatable cellTemplate not loading

You have to initialize your columns inside ngAfterViewInit. I was facing the same problem and I realized the templateRef was undefined, even if I initialized the columns inside ngOnInit. So I moved the columns initialization to ngAfterViewInit and it works just great. Like following in Angular 9:

import { ... AfterViewInit } from '@angular/core';

ngAfterViewInit() {
    this.columns = [
        { name: 'Name', prop: 'displayName' },
        { name: 'Email', prop: 'emailAddress' },
        { name: 'Role', prop: 'role', cellTemplate: this.roleTemplate },
        { name: 'Status', prop: 'status' },
    ];
  }

I am on Angular 7 and i had the exact problem you described - on the exact same sample code! As suggested in another answer, moving the column population into ngOnInit did not make any difference for me. What worked for me was a restart of the web server - in my case i killed the running ng serve and started again. Sounds strange, but it worked for me. Looks like this is some sort of a caching issue.


I think you need to move your columns initialization inside ngOnInit like:

ngOnInit() {
  this.columns = [
    { name: 'Name', prop: 'displayName' },
    { name: 'Email', prop: 'emailAddress' },
    { name: 'Role', prop: 'role', cellTemplate: this.roleTemplate },
  ];
}

Plunker Example