Angular PrimeNG TreeTable Events

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 will see the Angular PrimeNG TreeTable Events.

TreeTable is used to display hierarchical data in tabular format. The Events help to know the actions that are taking place and we can keep a check on them and also show relevant updates accordingly.

Angular PrimeNG TreeTable Events:

• onNodeExpand(event): It is the callback to invoke when a node is expanded.
• onNodeCollapse(event): It is the callback to invoke when a node is collapsed.
• onPage(event): It is the callback to invoke when pagination occurs.
• onSort(event): It is the callback to invoke when a column gets sorted.
• onFilter(event): It is the callback to invoke when data is filtered.
• onLazyLoad(event): It is the callback to invoke when paging, sorting, or filtering happens in lazy mode.
• onColResize(event): It is the callback to invoke when a column is resized.
• onColReorder(event): It is the callback to invoke when a column is reordered.
• onNodeSelect(event): It is the callback to invoke when a node is selected.
• onNodeUnselect(event): It is the callback to invoke when a node is unselected.
• onContextMenuSelect(event): It is the callback to invoke when a node is selected with a right click.
• onHeaderCheckboxToggle(event): It is the callback to invoke when the state of the header checkbox changes.
• onEditInit(event): It is the callback to invoke when a cell switches to edit mode.
• onEditComplete(event): It is the callback to invoke when cell edit is completed.
• onEditCancel(event): It is the callback to invoke when cell edit is canceled with the escape key.

Syntax: 

<p-treeTable 
    [value]="tableData" 
    (event-name)="...">
</p-treeTable>

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 a simple Tree showing a toast on closing a TreeNode in Angular PrimeNG.

app.component.html

<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG TreeTable Events</h3>

<p-treeTable [columns]="cols"
             [value]="tableData"
             selectionMode="single"
             (onNodeCollapse)="handleClick($event)">
    <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-toast position="top-left"></p-toast>

app.component.ts

import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
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: 'D',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'E',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'F',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'G',
                    age: '32',
                },
                children: [
                    {
                        data: {
                            name: 'H',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'I',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'J',
                    age: '64',
                },
                children: [
                    {
                        data: {
                            name: 'K',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'L',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'M',
                    age: '12',
                },
                children: [
                    {
                        data: {
                            name: 'N',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'O',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'P',
                    age: '34',
                },
                children: [
                    {
                        data: {
                            name: 'Q',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'R',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '43',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
        ];
    }

    handleClick(event: any) {
        this.messageService.add({
            severity: 'warn',
            summary: 'Node Collapsed',
            detail: 'Welcome to GeeksforGeeks',
        });
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TreeTableModule } from 'primeng/treetable';
import { ToastModule } from 'primeng/toast';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeTableModule,
        FormsModule,
        ToastModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In the following example, the TreeTable shows an alert when the TreeTable is sorted in Angular PrimeNG.

app.component.html

<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG TreeTable Events</h3>

<p-treeTable [value]="tableData"
             [columns]="cols"
             (onSort)="handleClick($event)">

    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns"
                [ttSortableColumn]="col.field">
                {{ col.header }}
                <p-treeTableSortIcon [field]="col.field">
                </p-treeTableSortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body"
                 let-rowNode let-rowData="rowData"
                 let-columns="columns">

        <tr>
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode"
                                    *ngIf="i == 0">
                </p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>
<p-toast position="top-left"></p-toast>

app.component.ts

import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
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: 'D',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'E',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'F',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'G',
                    age: '32',
                },
                children: [
                    {
                        data: {
                            name: 'H',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'I',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'J',
                    age: '64',
                },
                children: [
                    {
                        data: {
                            name: 'K',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'L',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'M',
                    age: '12',
                },
                children: [
                    {
                        data: {
                            name: 'N',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'O',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'P',
                    age: '34',
                },
                children: [
                    {
                        data: {
                            name: 'Q',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'R',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '43',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
        ];
    }

    handleClick(event: any) {
        this.messageService.add({
            severity: 'success',
            summary: 'Sorted Column',
            detail: 'Welcome to GeeksforGeeks',
        });
    }
}

app.module.ts

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

Output:

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