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 Methods.
Angular PrimeNG Tree is used to display hierarchical data in form of a tree. The methods provide some functionality and modify the tree which would otherwise be difficult very easily.
Angular PrimeNG Tree Methods:
- resetFilter: It resets the filtering of the tree.
- _filter(string): It takes a string input and then filters the contents of the tree.
- scrollToVirtualIndex(index): Calling this function with an index scrolls to the particular index if available. Virtual scrolling needs to be enabled.
- scrollTo(options.left, options.right, options.behavior): It takes left and right parameters as x and y pixels to scroll and the behavior asks how to scroll.
Syntax: Call a method as follows:
<p-tree [value]="files1" selectionMode="single" [filter]="true"> </p-tree> // In app.component.ts this.tree.resetFilter();
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:
Project Structure
Example 1: In the following example, we have a simple Tree with some data and an enabled tree filter.
app.component.html
<h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
<h3>Angular PrimeNG Tree Methods</h3>
<h5>Basic</h5>
<p-tree id="gfgtree" [filter]="true"
selectionMode="single" scrollHeight="200px" [value]="files1">
</p-tree>
|
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
import { Tree } from 'primeng/tree';
@Component({ selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
}) export class AppComponent { files1: TreeNode[] = [];
@ViewChild('gfgtree') tree!: Tree;
files2: TreeNode[] = [];
constructor(private nodeService: NodeService) { }
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;
}
resetFilter() {
this.tree.resetFilter();
}
} |
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 { NodeService } from './nodeservice';
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],
providers: [NodeService],
}) export class AppModule { } |
Output:
Example 2: In the following example, we are going to reset the filter content by pressing the button.
app.component.html
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Methods</h3>
<p-tree #tree
[filter]="true"
selectionMode="single" scrollHeight="200px" [value]="files1">
</p-tree>
<p-button label="Reset It!" (onClick)="handleClick()">
</p-button>
|
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
import { Tree } from 'primeng/tree';
@Component({ selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
}) export class AppComponent { files1: TreeNode[] = [];
files2: TreeNode[] = [];
@ViewChild('tree') tree!: Tree;
constructor(private nodeService: NodeService) { }
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;
}
handleClick() {
this.tree.resetFilter();
}
} |
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 { NodeService } from './nodeservice';
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],
providers: [NodeService],
}) export class AppModule { } |
Output:
Reference: http://primefaces.org/primeng/tree