Angular PrimeNG Tree Templating

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. In this article, we will see the Angular PrimeNG Tree Templating.

The Tree in Angular PrimeNG is utilized to render the hierarchical data as a tree. The templates allow great customization and we can add extra details to the Tree. In Templating, by default, the label of a treenode is displayed inside a tree node, in case, you need to place custom content define a pTemplate that gets the treenode as an implicit variable. 

Syntax

<p-tree [value]="...">
    <ng-template let-node pTemplate="default">
        ...
    </ng-template>
</p-tree>

Creating Angular application & module installation:

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

ng new appname

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

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Example 1: In this example, the default template is utilized with the Tree Templating in Angular PrimeNG.

• app.component.html

HTML

<div style="width:50%">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        Angular PrimeNG Tree Templating
    </h2>
    <p-tree [value]="files1">
        <ng-template pTemplate="default" let-node>
            <p>{{node.label}}</p>
        </ng-template>
    </p-tree>
</div>

• app.component.ts

Javascript

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

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

    files2: TreeNode[] = [];

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

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

                        children: [
                            {
                                label: 'Singly List',
                                icon: 'pi pi-code',
                            },
                            {
                                label: 'Doubly List',
                                icon: 'pi pi-code',
                            },
                            {
                                label: 'Circularly List',
                                icon: 'pi pi-code',
                            },
                        ],
                    },
                    {
                        label: 'Queue',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'Simple Queue',
                                icon: 'pi pi-code',
                            },
                            {
                                label: 'Doubly ended Queue',
                                icon: 'pi pi-code',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'Algorithms',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'Greedy ',
                        icon: 'pi pi-code',
                    },
                    {
                        label: 'BFS ',
                        icon: 'pi pi-code',
                    },
                    {
                        label: 'Dynamic Programming',
                        icon: 'pi pi-code',
                    },
                ],
            },
        ];
        this.files2 = this.files1;
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { TreeModule } from 'primeng/tree';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', component: AppComponent }
        ])
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In this example, the url template is utilized with the Tree Templating in Angular PrimeNG.

• app.component.html

HTML

<div style="width:50%">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        Angular PrimeNG Tree Templating
    </h2>

    <p-tree [value]="files1">
        <ng-template let-node pTemplate="url">
            <a [href]="node.data">
                {{node.label}}
            </a>
        </ng-template>
        <ng-template let-node pTemplate="default">
            <b>
                {{node.label}}
            </b>
        </ng-template>
    </p-tree>
</div>

• app.component.ts

Javascript

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

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

    ngOnInit() {
        this.files1 = [
            {

                label: 'GeeksforGeeks',
                children: [
                    { label: 'C++', data:
'https://www.geeksforgeeks.org/c-plus-plus/',
                      type: 'url' },
                    { label: 'Java', data:
'https://www.geeksforgeeks.org/java/',
                      type: 'url' },
                    { label: 'React JS', data:
'https://www.geeksforgeeks.org/reactjs-tutorials/',
                      type: 'url' },
                    { label: 'Angular JS', data:
'https://www.geeksforgeeks.org/angularjs/amp/',
                      type: 'url' }
                ]
            },
        ];
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { TreeModule } from 'primeng/tree';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', component: AppComponent }
        ])
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/tree/templating