Компонент Angular PrimeNG Form TreeSelect

Angular PrimeNG — это библиотека с открытым исходным кодом, состоящая из собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и эта структура используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим компонент Angular PrimeNG Form TreeSelect.

Компонент TreeSelect позволяет пользователям выбирать элементы из иерархических данных. Он принимает массив TreeNodes в качестве свойства options для отображения данных.

В режиме одиночного выбора TreeSelect можно выбрать один элемент из иерархии.

В режиме множественного выбора TreeSelect можно выбрать более одного элемента, и по умолчанию выбранный элемент будет разделен запятой и будет дополнен многоточием, когда выбранные элементы выходят за пределы компонента TreeSelect.

В режиме выбора флажка TreeSelect рядом с каждым элементом отображается флажок, который можно использовать для выбора элемента и всех элементов, подпадающих под него в иерархии.

В качестве альтернативы поведению выбора, заданному параметром selectionMode, TreeSelects предоставляет параметры «один», «много» и «флажок».

По умолчанию выбранные элементы отображаются в виде списков, разделенных запятыми, однако доступен альтернативный режим чипа , который использует свойство display для отображения элементов в виде токенов.

Синтаксис:

<p-treeSelect 
    [(ngModel)]="..."
    selectionMode="..." 
    disaply="..."
    [options]="..." 
    placeholder="...>
</p-treeSelect>

Свойства компонента Angular PrimeNG Form TreeSelect:

• options: это свойство принимает массив TreeNodes в качестве значения для отображения компонента TreeSelect.
• scrollHeight: если высота списка больше высоты области просмотра, определяется полоса прокрутки. Он имеет строковый тип и значение по умолчанию — 400 пикселей.
• заполнитель: Свойство заполнителя используется для настройки отображения заполнителя, когда элементы не выбраны.
• disabled: указывает, что компонент должен быть деактивирован, если он присутствует. Он имеет логический тип и значение по умолчанию — false.
• tabindex: это индекс элемента в порядке табуляции. Он имеет строковый тип и значение по умолчанию равно null.
• inputId: Это идентификатор базового элемента ввода. Он имеет строковый тип и значение по умолчанию равно null.
• ariaLabelledBy: создает соединения между компонентом и меткой(ями), при этом значением атрибута является один или несколько идентификаторов элемента. Он имеет строковый тип и значение по умолчанию равно null.
• selectionMode: это свойство используется для установки режима выбора компонента TreeSelect. Допустимые значения: «один», «несколько» и «флажок». Значение по умолчанию — «один».
• panelClass: относится к классу стиля панели наложения. Он имеет строковый тип и значение по умолчанию равно null.
• appendTo: используется для указания места применения наложения и предоставления допустимого селектора запроса или HTMLElement. «Body» обозначает тело документа, а «self» — сам элемент.
• emptyMessage: используется, когда нет выбора, будет отображаться текст. Значение из настройки локали PrimeVue используется по умолчанию.
• display: это свойство определяет, как будут отображаться выбранные элементы. Допустимые значения: «запятая» и «чип». Значение по умолчанию — «чип».
• propagateSelectionUp: используется для проверки того, передаются ли выборы, сделанные в флажках, узлам-предкам. Это логический тип, и значение по умолчанию — true.
• propagateSelectionDown: используется для проверки того, передаются ли варианты флажков дочерним узлам. Это логический тип, и значение по умолчанию — true.
• metaKeySelection: указывает, как можно выбрать несколько элементов. При значении true необходимо нажать metaKey, чтобы выбрать или отменить выбор элемента, в то время как false позволяет независимо выбирать каждый элемент. MetaKeySelection автоматически отключается на сенсорных устройствах.
• фильтр: предоставляет область ввода для фильтрации элементов, если они указаны. Он имеет логический тип и значение по умолчанию — false.
• filterBy: выбирает поле или поля (разделенные запятыми) для поиска, когда включена фильтрация. Он имеет строковый тип и значением по умолчанию является метка.
• filterMode: для допустимых значений доступны «снисходительный» и «строгий» режимы фильтрации. Это строковый тип, а значение по умолчанию — мягкое.
• filterPlaceholder: если поле ввода фильтра пусто, будет отображаться текст-заполнитель. Он имеет строковый тип и значение по умолчанию равно null.
• filterLocale: используемая локаль фильтрации. Текущая локаль среды хоста служит локалью по умолчанию.
• resetFilterOnHide: Это удаляет значение фильтра, когда раскрывающийся список скрыт. Это логический тип, и значение по умолчанию — true.
• showClear: отображается значок очистки, чтобы очистить значение, когда оно включено. Он имеет логический тип и значение по умолчанию — false.

События компонента Angular PrimeNG Form TreeSelect:

• onShow: при отображении наложения запускается обратный вызов.
• onHide: когда оверлей скрыт, запускается обратный вызов.
• onFilter: когда данные фильтруются, запускается обратный вызов.
• onNodeSelect: при выборе узла запускается обратный вызов.
• onNodeUnselect: когда узел не выбран, запускается обратный вызов.
• onNodeExpand: когда узел расширяется, запускается обратный вызов.
• onNodeCollapse: когда узел сворачивается, запускается обратный вызов.
• onClear: когда поле ввода очищается, запускается обратный вызов.

Angular PrimeNG Form TreeSelect Шаблоны компонентов:

• значение: это значение компонента.
• заголовок: это значение компонента. Опции являются опциями TreeNode.
• нижний колонтитул: это значение компонента. Опции являются опциями TreeNode.

Angular PrimeNG Form TreeSelect Стили компонентов:

• p-treeselect: это элемент-контейнер.
• p-treeselect-label-container: контейнер меток, используемый для отображения определенных товаров.
• p-treeselect-label: это метка для отображения выбранных элементов.
• p-treeselect-trigger: это кнопка раскрывающегося списка.
• p-treeselect-panel: это панель наложения элементов.
• p-treeselect-items-wrapper: это список вещей.

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:

Шаги для запуска приложения: Чтобы запустить указанный выше файл, выполните следующую команду:

ng serve --save

Пример 1: Ниже приведен пример, иллюстрирующий использование компонента Angular PrimeNG Form TreeSelect.

• приложение.component.html:

• app.component.ts:

• app.module.ts:

Выход:

Пример 2. Ниже приведен еще один пример, иллюстрирующий использование компонента Angular PrimeNG Form TreeSelect.

• приложение.component.html:

• app.component.ts: