Angular ngx-datatable cellTemplate not loading

Question

I'm trying to override the template of an ngx-datatable cell. So in my template (html) file i'm setting a small view for this. To test if the template works i'm just displaying the value with starts around it:

<ngx-datatable
    class="material"
    [rows]="rows"
    [columns]="columns"
    headerHeight="45">
</ngx-datatable>
<ng-template #roleTemplate let-row="row" let-value="value" let-i="index">
  <strong> **{{ value }}** </strong>
</ng-template>

In my component im using ViewChild to get the template and give it to my datatable. @ViewChild('roleTemplate') roleTemplate: TemplateRef<any>;

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

Only thing the documentation says:

cellTemplate: TemplateRef

Angular TemplateRef allowing you to author custom body cell templates

However it doesn't seem to work. Am I missing something?

Answer 1

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

Answer 2

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' },
    ];
  }

Answer 3

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.

Answer 4

The problem is that you're most probably using a nested template and thus angular is not able to get a reference.

So move your column templates from here

<ng-template #someParent>
  <ng-template #columnXYZ></ng-template>
</ng-template>

to here

<ng-template #someParent></ng-template>
<ng-template #columnXYZ></ng-template>

Answer 5

You have the problem here with initialization and assignment a variable in one row

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

You need to drop to different rows initialization and assignment like this

columns: any[];


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