Angular PrimeNG Tree Styling

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 Styling. 

Angular PrimeNG Tree is used to display hierarchical data as a tree. The styling classes allow for modification of the style of the tree. The styles allow access to each and every element.

Styling: Here are the styling classes of the tree component:

• p-tree: It is the main container element.
• p-tree-horizontal: It is the main container element in horizontal mode.
• p-tree-container: It is the container of tree nodes.
• p-treenode: It is a single treenode element.
• p-treenode-content: It is the content of the tree node.
• p-treenode-toggler: It is the Toggle icon to show/hide content.
• p-treenode-icon: It is the icon of a tree node.
• p-treenode-label: It is the label of a tree node.
• p-treenode-children: It is the container element for node children.

Syntax: Apply custom CSS to the classes.

:host ::ng-deep .p-treenode {
  // CSS Styles
}

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

Run the app using the below command

ng serve --open

Example 1: In the following example, we have simple TreeNodes with bold font.

app.component.html

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

<p-tree
    [value]="files1"
    selectionMode="single">
</p-tree>

app.component.css

:host ::ng-deep .p-treenode {
    font-weight: 900;
}

app.component.ts

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

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 will have icons with a green border.

app.component.html

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

<p-tree
    [value]="files1"
    selectionMode="single">
</p-tree>

app.component.css

:host ::ng-deep .p-treenode-icon {
    border-width: 2px;
    border-color: green;
    border-style: solid;
}

app.component.ts

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

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 { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

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: http://primefaces.org/primeng/tree