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

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