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 Beginner_angular
Step 2: After creating your project folder i.e. Beginner_angular, move to it using the following command.
cd Beginner_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;"> w3wiki </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;"> w3wiki </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