Древовидный компонент Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы увидим компонент дерева Angular PrimeNG.
Компонент Tree используется для отображения иерархических данных. Angular предоставляет множество настроек в виде свойств, стилей, шаблонов и т. д., которые мы можем использовать для изменения дерева в соответствии с нашими потребностями.
- Шаблон дерева: по умолчанию узел дерева отображается внутри узла дерева. Мы можем настроить его, определив собственный pTemplate , который получает узел дерева как неявную переменную.
- Выбор дерева: Дерево поддерживает три варианта выбора: одиночный, множественный и флажок. Значение по умолчанию — одиночное, и его можно включить с помощью selectionMode и передачи одного или массива узлов дерева .
- Фильтр дерева: Фильтрация в компоненте "Дерево" включается, если установить для фильтра значение true. По умолчанию метка узла дерева сравнивается со значением фильтра. Мы можем настроить, какие поля следует использовать во время поиска, чтобы определить свойство filterBy .
- Tree Lazy: Ленивая загрузка используется для загрузки больших наборов данных. Также вместо загрузки всего дерева узлы могут быть загружены в событии onNodeExpand.
- Прокрутка дерева : прокрутка используется для экономии места, поскольку содержимое дерева является динамическим. Он включается свойством scrollHeight.
- Дерево ContextMenu: дерево имеет эксклюзивную интеграцию с контекстным меню, созданным путем привязки экземпляра меню к дереву.
- Перетаскивание дерева: узлы дерева можно переупорядочивать внутри дерева, а также можно перемещать между несколькими деревьями. Перетаскивание можно включить, задав для draggableNodes значение true и разрешив перетаскивание, чтобы включить свойство droppableNodes.
- Горизонтальное дерево: Ориентация дерева может быть изменена на горизонтальную.
- Свойства : существуют различные свойства, которые используются для компонента дерева, чтобы включить некоторые функции.
- Методы : Angular PrimeNG предоставляет различные методы, которые можно использовать для сброса, фильтрации, прокрутки до определенной позиции и т. д. до компонента дерева.
- События: этот компонент облегчает включение различных функций в компонент "Дерево".
- Стили: этот компонент помогает добавлять различные стили для улучшения общего пользовательского опыта компонента дерева.
- Шаблоны: Angular PrimeNG предоставляет различные шаблоны для улучшения взаимодействия с пользователем.
Синтаксис : создайте компонент дерева следующим образом.
- Импортируйте модуль компонента "Дерево"
import {TreeModule} from "primeng/tree"; import {TreeNode} from "primeng/api";
- Реализация выглядит следующим образом:
<p-tree [value]="files"></p-tree>
Создание приложения Angular и установка модуля:
- Создайте приложение Angular, используя следующую команду.
ng new geeks_angular
- После создания папки вашего проекта, например, geeks_angular, перейдите к ней с помощью следующей команды.
cd geeks_angular
- Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом:
- Шаги для запуска приложения: Напишите следующую команду для запуска приложения:
ng serve --open
Пример 1: В этом примере описывается базовое использование компонента дерева в Angular PrimeNG.
- app.component.html
HTML
< h1 style="color: green; text-align:center;"> GeeksforGeeks </ h1 > < h3 >Angular PrimeNG Tree Component</ h3 > < p-tree [value]="data"> < ng-template pTemplate = "header" > < h3 >Tutorials available</ h3 > </ ng-template > </ p-tree > |
- app.component.ts
Javascript
import { Component, OnInit, ViewChild } from "@angular/core" ; import { TreeNode } from "primeng/api" ; import { TreeTable } from "primeng/treetable" ; import { MessageService } from "primeng/api" ; @Component({ selector: "my-app" , templateUrl: "./app.component.html" , providers: [MessageService], }) export class AppComponent { data: TreeNode[]; cols: any[]; constructor(private messageService: MessageService) { } ngOnInit() { this .cols = [ { field: "name" , header: "First Name" }, { field: "age" , header: "Age" }, ]; this .data = [ { 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" , }, ], }, ]; } } |
- app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { TreeModule } from "primeng/tree" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, TreeModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule {} |
Выход:
Пример 2. В следующем примере при выборе узла всплывающее уведомление отображается с использованием события onNodeSelect .
- app.component.html
HTML
< h1 style="color: green; text-align:center;"> GeeksforGeeks </ h1 > < h3 >Angular PrimeNG Tree Component</ h3 > < p-tree [value]="data" selectionMode = "single" (onNodeSelect)="handleClick($event)"> </ p-tree > < p-toast position = "top-left" ></ p-toast > |
- app.component.ts
Javascript
import { Component, OnInit, ViewChild } from "@angular/core" ; import { TreeNode } from "primeng/api" ; import { TreeTable } from "primeng/treetable" ; import { MessageService } from "primeng/api" ; @Component({ selector: "my-app" , templateUrl: "./app.component.html" , providers: [MessageService], }) export class AppComponent { data: TreeNode[]; cols: any[]; constructor(private messageService: MessageService) { } ngOnInit() { this .cols = [ { field: "name" , header: "First Name" }, { field: "age" , header: "Age" }, ]; this .data = [ { 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" , }, ], }, ]; } handleClick(event: any) { this .messageService.add({ severity: "success" ,
РЕКОМЕНДУЕМЫЕ СТАТЬИ |