Древовидный компонент 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

• app.component.ts

• app.module.ts

Выход:

Пример 2. В следующем примере при выборе узла всплывающее уведомление отображается с использованием события onNodeSelect .

• app.component.html

• app.component.ts