Angular PrimeNG Tree 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 designs, an extensive icon library, and much more. In this tutorial, we are going to learn Angular PrimeNG Tree Events. 

Angular PrimeNG Tree is used to display hierarchical data in form of a tree. The events allow triggering different actions that take place in the application. The events fire a callback which is bonded to them.

Angular PrimeNG Tree Events:

• 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.
• 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.
• onNodeContextMenuSelect(event): It is the callback to invoke when a node is selected with a right click.
• onNodeDrop(event): It is the callback to invoke when a node is dropped.
• onFilter(event): It is the callback to invoke when data is filtered.
• onLazyLoad(event): It is the callback to invoke when in lazy mode to load new data.
• onScroll(event): It is the callback to invoke in virtual scroll mode when the scroll position changes.
• onScrollIndexChange(event): It is the callback to invoke in virtual scroll mode when the scrolling position and item’s range in view change.

Syntax:

<p-tree 
    [value]="files1" 
    (event-name)="...">
</p-tree>

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.

app.component.html

<h1 style="color:green;text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Events</h3>
<h5>Basic</h5>
<p-tree
    [value]="files1"
    selectionMode="single"
    (onNodeCollapse)="handleClick($event)">
</p-tree>
<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 {
    files1: TreeNode[] = [];

    files2: TreeNode[] = [];

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.files1 = [
            {
                label: 'A',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                    {
                        label: 'E',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'F',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'G',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'H',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'I',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'J',
                        icon: 'pi pi-folder',
                    },
                ],
            },
        ];
        this.files2 = this.files1;
    }

    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 { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        ButtonModule,
        HttpClientModule,
        FormsModule,
        ToastModule,
        RippleModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: In the following example, an alert is shown when a node is selected using the onNodeSelect event.

app.component.html

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

<p-tree
    [value]="files1"
    selectionMode="single"
    (onNodeSelect)="onNodeSelect($event)">
</p-tree>

app.component.ts

import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    files1: TreeNode[] = [];
    files2: TreeNode[] = [];

    ngOnInit() {
        this.files1 = [
            {
                label: 'A',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                    {
                        label: 'E',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'F',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'G',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'H',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'I',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'J',
                        icon: 'pi pi-folder',
                    },
                ],
            },
        ];
        this.files2 = this.files1;
    }

    onNodeSelect(event: any) {
        alert('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 { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        ButtonModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

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