Angular PrimeNG Tree Templates

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 Tree Templates. 

Angular PrimeNG Tree is used to display hierarchical data as a tree. The templates allow great customization and we can add extra details to the Tree.

Angular PrimeNG Tree Templates:

• header: It is the header component.
• empty: The template is shown when the table is empty.
• footer: The template shows the footer of the table.
• loader: The template is shown when the table is loading the data.

Syntax: 

<p-tree [value]="files1">
    <ng-template pTemplate="header">
        Tutorials available
    </ng-template>
</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.

Run the app using the below command: Write the below command to run the application

ng serve --open

Example 1: In the following example, we have a simple Tree with a header.

app.component.html

HTML

<h1 style="color:green;
    text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Templates</h3>
<h5>Basic</h5>
<p-tree [value]="files1">
    <ng-template pTemplate="header">
        <h3>Tutorials available</h3>
    </ng-template>
</p-tree>

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

import { FormsModule } from '@angular/forms';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';

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

Output:

Example 2: In the following example, we have an empty template for a Tree.

app.component.html

HTML

<h1 style="color:green;
    text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Templates</h3>
<p-tree [value]="files1">
    <ng-template pTemplate="header">
        <h3>Tutorials available</h3>
    </ng-template>
</p-tree>
<h3>No data Table</h3>
<p-tree [value]="no_data">
    <ng-template pTemplate="empty">
        <h3>Tutorials aren't available</h3>
    </ng-template>
</p-tree>

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

import { FormsModule } from '@angular/forms';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';

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

Output:

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