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