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?

Rhaetian

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

Pyrolysis

That link is no longer working - github.com/swimlane/ngx-datatable/tree/master/demo/templates – Deploy

I'm using v^17 of ngx-datatable. ngOnInit() didn't do it for me. The cell templates were being ignored. Moving the column initialization to ngAfterViewInit() made everything magically work – Tournai

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

Unlace

Getting the same issue in ng10 - oninit not working but afterviewinit is. – Agist

Same. I tried so many things and my cell templates were being ignored and instead ngx-datatable was just putting the raw values (without the template) in there. After I moved the initialization to ngAfterViewInit() everything magically started working – Tournai

Another thing that's a gotcha, in case this helps anyone reading this... make sure props whose values are boolean or number are assigned without quotes (i.e. maxWidth: 80, sortable: false, etc) or they'll be ignored too. – Tournai

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.

Linked

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>

Colonist

This fixed my issue! My template did not exist when i assigned the columns, and thus it would be undefined. Moving the ng-template outside any other elements fixed the issue. It's probably also a good idea to assign the columns in the ngAfterViewInit though, but that alone did not fix my issue. – Homograft

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

Carob

Answer 6

You should initialize the columns using ngAfterViewInit, and use the Promise object to prevent error "NG0100: Expression has changed after it was checked"

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

Shutt