Issue with loading cellTemplate in Angular ngx-datatable

Question

Issue with loading cellTemplate in Angular ngx-datatable

Looking to customize the template of an ngx-datatable cell, I decided to create a small view in my HTML file. To check if the template is functioning correctly, I included some placeholder text within 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>

Using ViewChild in my component, I obtained the template and assigned it to the 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' },
    ];

Despite following the documentation, which mentions:

cellTemplate: TemplateRef

Angular TemplateRef allowing you to author custom body cell templates

The customized template does not seem to be working as expected. Is there something I might have overlooked?

angular typescript datatable

Answer 1

Answer №1

It may be beneficial to relocate your columns initialization within the ngOnInit method, as shown below:

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

Check out this Plunker example for reference.

Answer 2

It may be beneficial to relocate your columns initialization within the ngOnInit method, as shown below:

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

Check out this Plunker example for reference.

Answer 3

Answer №2

To properly set up your columns, make sure to initialize them within the ngAfterViewInit lifecycle hook. I encountered a similar issue where the templateRef was undefined even though I had initialized the columns in the ngOnInit method. I resolved this by moving the column initialization logic to the ngAfterViewInit method, which solved the problem effectively. Here's an example of how to do it 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 4

To properly set up your columns, make sure to initialize them within the ngAfterViewInit lifecycle hook. I encountered a similar issue where the templateRef was undefined even though I had initialized the columns in the ngOnInit method. I resolved this by moving the column initialization logic to the ngAfterViewInit method, which solved the problem effectively. Here's an example of how to do it 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 5

Answer №3

Encountering the same issue on Angular 7 with identical sample code was a frustrating experience for me as well. Despite attempting to modify the column population within the ngOnInit method, I did not observe any improvements. Surprisingly, what ultimately resolved the problem for me was restarting the web server. Simply terminating the existing ng serve process and initiating it again seemed to eliminate the issue. Though unconventional, this approach proved effective in resolving what appeared to be a caching-related complication.

Answer 6

Encountering the same issue on Angular 7 with identical sample code was a frustrating experience for me as well. Despite attempting to modify the column population within the ngOnInit method, I did not observe any improvements. Surprisingly, what ultimately resolved the problem for me was restarting the web server. Simply terminating the existing ng serve process and initiating it again seemed to eliminate the issue. Though unconventional, this approach proved effective in resolving what appeared to be a caching-related complication.

Answer 7

Answer №4

The issue lies in the fact that you are likely utilizing a nested template, causing Angular to struggle in obtaining a reference.

To resolve this problem, simply move your column templates as indicated below:

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

to the following location:

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

Answer 8

The issue lies in the fact that you are likely utilizing a nested template, causing Angular to struggle in obtaining a reference.

To resolve this problem, simply move your column templates as indicated below:

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

to the following location:

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

Answer 9

Answer №5

The issue lies in combining initialization and assignment of a variable into one line.

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

To resolve this, split the initialization and assignment onto separate lines like below:

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

Answer 10

The issue lies in combining initialization and assignment of a variable into one line.

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

To resolve this, split the initialization and assignment onto separate lines like below:

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

Answer 11

Answer №6

To avoid the error "NG0100: Expression has changed after it was checked," it is recommended to initialize the columns using ngAfterViewInit along with utilizing the Promise object.

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

Answer 12

To avoid the error "NG0100: Expression has changed after it was checked," it is recommended to initialize the columns using ngAfterViewInit along with utilizing the Promise object.

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

Issue with loading cellTemplate in Angular ngx-datatable

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Developing a custom HTTP request class in Angular 2 and its exporting capabilities

Steps for creating user accounts and saving user information in Firebase's Real Time Database

Can you assign a HostListener to a particular button in Angular application?

Troubleshooting React child problems in TypeScript

The concept of HttpClient type safety appears to neglect the use of interfaces

Unknown Element Error in Angular

Exploring a collection of objects in your Angular 4 Firebase database via iteration

Angular is giving me a hard time setting my background image

Expansive Carousel Feature with Ng Bootstrap

Angular error code TS2322: Type 'Promise<Dish[]>' is causing issues

Comparison between TypeScript's variable scope and JavaScript's variable scope

Utilizing external imports in webpack (dynamic importing at runtime)

Building a reusable Button component in React using TypeScript that handles not assignable type errors

Applying agGroupCellRenderer alongside a personalized cell rendering feature in Angular 9

Update a specific form data field within an Angular application

Transferring documents from an angular ionic application to a slim php framework on the localhost

Error: Virtual script not located; possibly absent <script lang="ts" / "allowJs": true / within the jsconfig.json.volar

Utilizing the power of Angular 15 in conjunction with Bootstrap 5's SCSS

Tips for creating an array that aligns with the keys of a type in TypeScript

Nestjs opts to handle invalid routes by throwing a NotFoundException rather than a MethodNotAllowed