Open In App

Angular PrimeNG TreeTable Change Detection

Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.

In this article, we are going to learn Angular PrimeNG TreeTable Change Detection. TreeTable is used to display hierarchical data in tabular format. The TreeTable needs to make aware of changes in its values. The Push, Pop or other actions don’t work in the case because of performance issues. Hence we need to splice to create a new array reference using a spread operator or similar.

Syntax:

// Modify the data
// Next splice and reference the new data array
this.data = [...this.data];

 

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new geeks_angular

Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following:

Project Structure

Example 1: In the following example, we have modified the data using a button that pushes data in array. Later using the another button, the TreeTable is updated.

app.component.html




<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
  
<h3>Angular PrimeNG TreeTable Change Detection</h3>
  
<p-treeTable [columns]="cols" [value]="tableData">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" 
        let-rowNode let-rowData="rowData" 
        let-columns="columns">
        <tr>
            <td>
                <p-treeTableToggler 
                    [rowNode]="rowNode">
                </p-treeTableToggler>
                {{ rowData.name }}
            </td>
            <td>{{ rowData.age }}</td>
            <td>{{ rowData.type }}</td>
        </tr>
    </ng-template>
</p-treeTable>
<p-button label="Add Data" 
    (onClick)="handleClick()"></p-button>
<p-button label="Update TreeTable" 
    (onClick)="updateView()"></p-button>


app.component.ts




import { Component, OnInit, ViewChild } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    tableData: TreeNode[];
  
    cols: any[];
  
    constructor(private messageService: MessageService) { }
  
    ngOnInit() {
        this.cols = [
            { field: 'name', header: 'First Name' },
            { field: 'age', header: 'Age' },
        ];
        this.tableData = [
            {
                data: {
                    name: 'A',
                    age: '40',
                },
                children: [
                    {
                        data: {
                            name: 'B',
                            age: '16',
                        },
                    },
                    {
                        data: {
                            name: 'C',
                            age: '14',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'G',
                    age: '32',
                },
                children: [
                    {
                        data: {
                            name: 'H',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'I',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'M',
                    age: '12',
                },
                children: [
                    {
                        data: {
                            name: 'N',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'O',
                            age: '24',
                        },
                    },
                ],
            },
  
            {
                data: {
                    name: 'S',
                    age: '43',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
        ];
    }
    handleClick() {
        this.tableData.push({
            data: {
                name: 'S',
                age: '43',
            },
            children: [
                {
                    data: {
                        name: 'T',
                        age: '20',
                    },
                },
                {
                    data: {
                        name: 'U',
                        age: '24',
                    },
                },
            ],
        });
    }
    updateView() {
        this.tableData = [...this.tableData];
    }
}


app.module.ts




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeTableModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule,
        ToastModule,
        RippleModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService],
})
export class AppModule { }


Output:

 

Example 2: In the following example, we have modified the Table Data with new data.

app.component.html




<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
  
<h3>Angular PrimeNG TreeTable Change Detection</h3>
  
<p-treeTable [columns]="cols" [value]="tableData">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" 
        let-rowNode let-rowData="rowData" 
        let-columns="columns">
        <tr>
            <td>
                <p-treeTableToggler 
                    [rowNode]="rowNode">
                </p-treeTableToggler>
                {{ rowData.name }}
            </td>
            <td>{{ rowData.age }}</td>
            <td>{{ rowData.type }}</td>
        </tr>
    </ng-template>
</p-treeTable>
<p-button label="Update Data" 
    (onClick)="handleClick()"></p-button>


app.component.ts




import { Component, OnInit, ViewChild } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    tableData: TreeNode[];
  
    cols: any[];
  
    constructor(private messageService: MessageService) { }
  
    ngOnInit() {
        this.cols = [
            { field: 'name', header: 'First Name' },
            { field: 'age', header: 'Age' },
        ];
        this.tableData = [
            {
                data: {
                    name: 'A',
                    age: '40',
                },
                children: [
                    {
                        data: {
                            name: 'B',
                            age: '16',
                        },
                    },
                    {
                        data: {
                            name: 'C',
                            age: '14',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'G',
                    age: '32',
                },
                children: [
                    {
                        data: {
                            name: 'H',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'I',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'M',
                    age: '12',
                },
                children: [
                    {
                        data: {
                            name: 'N',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'O',
                            age: '24',
                        },
                    },
                ],
            },
  
            {
                data: {
                    name: 'S',
                    age: '43',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
        ];
    }
    handleClick() {
        this.tableData = [
            {
                data: {
                    name: 'D',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'E',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'F',
                            age: '24',
                        },
                    },
                ],
            },
  
            {
                data: {
                    name: 'J',
                    age: '64',
                },
                children: [
                    {
                        data: {
                            name: 'K',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'L',
                            age: '24',
                        },
                    },
                ],
            },
  
            {
                data: {
                    name: 'P',
                    age: '34',
                },
                children: [
                    {
                        data: {
                            name: 'Q',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'R',
                            age: '24',
                        },
                    },
                ],
            },
        ];
    }
}


app.module.ts




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeTableModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule,
        ToastModule,
        RippleModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService],
})
export class AppModule { }


Output:

 

Reference: http://primefaces.org/primeng/treetable



Last Updated : 07 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads