Angular PrimeNG Form MultiSelect Сгруппированный компонент
PrimeNG — это библиотека компонентов AngularJS, разработанная PrimeFaces. Он предоставляет разработчикам возможность выбора из широкого спектра уже реализованных тем и компонентов пользовательского интерфейса для своих приложений. В этой статье мы увидим сгруппированный компонент Angular PrimeNG Form MultiSelect.
Компонент MultiSelect позволяет пользователю выбирать несколько параметров из набора предоставленных параметров. Группировка опции MultiSelect позволяет нам группировать похожие опции вместе, что помогает пользователям быстро находить соответствующую опцию и улучшает взаимодействие с пользователем. Для группировки свойству группы должно быть присвоено значение true.
Свойства группового режима Angular PrimeNG Form MultiSelect:
- options: это свойство используется для передачи массива объектов, которые будут отображаться в качестве параметров MultiSelect.
- group: это логическое свойство, используемое для указания, включен или отключен групповой режим.
- optionLabel: Это свойство вложенного объекта опций, которое будет использоваться в качестве метки опции.
- optionGroupLabel: это свойство объекта параметров, которое будет использоваться в качестве метки группы.
- optionGroupChildren: это свойство объекта параметров, который содержит дочерние группы.
- defaultLabel: это свойство принимает строку, которая используется в качестве заполнителя, когда не выбран ни один элемент.
Синтаксис:
<p-multiSelect [group]="true" [options]="..." [(ngModel)]="..." optionLabel="..." optionGroupLabel="..." optionGroupChildren="..." defaultLabel="..."> </p-multiSelect>
Создание приложения и установка необходимых модулей:
Шаг 1: Создайте приложение Angular с помощью следующей команды.
ng new my_app
Шаг 2: После создания приложения перейдите в папку проекта с помощью приведенной ниже команды.
cd new_app
Шаг 3: Наконец, установите следующие модули в каталог вашего проекта.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта показана на рисунке ниже.
Пример 1. Это простой пример, показывающий, как сгруппировать параметры множественного выбора.
- приложение.component.html:
HTML
< h2 style = "color: green;" > GeeksforGeeks </ h2 > < h5 > Angular PrimeNG Form MultiSelect Grouped Component </ h5 > < p-multiSelect class = "custom-ms" [group]="true" [options]="itemGroups" [(ngModel)]="selectedItems" defaultLabel = "Select Software(s)" > </ p-multiSelect > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; import { SelectItemGroup } from "primeng/api" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styles: [ ` :host ::ng-deep .custom-ms .p-multiselect-label { width: 300px !important; } ` ] }) export class AppComponent { itemGroups: SelectItemGroup[] = []; selectedItems: any[] = []; ngOnInit() { this .itemGroups = [ { label: "Browsers" , items: [ { label: "Chrome" , value: "web_1" , }, { label: "Firefox" , value: "web_2" }, { label: "Edge" , value: "web_3" , }, ] }, { label: "Creative Tools" , items: [ { label: "Filmora" , value: "cre_1" }, { label: "Illustrator" , value: "cre_2" , }, { label: "Photoshop" , value: "cre_3" }, ] }, { label: "IDEs" , items: [ { label: "VS Code" , value: "ide_1" , }, { label: "Atom" , value: "ide_2" }, { label: "Turbo C++" , value: "ide_3" , }, ] } ]; } } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { FormsModule } from "@angular/forms" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { MultiSelectModule } from "primeng/multiselect" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, MultiSelectModule, FormsModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Пример 2: Это еще один пример, иллюстрирующий группировку опций вместе с использованием сгруппированных свойств.
- app.component.html
HTML
< h2 style = "color: green;" > GeeksforGeeks </ h2 > < h5 > Angular PrimeNG Form MultiSelect Grouped Component </ h5 > < p-multiSelect class = "custom-ms" [group]="true" [options]="brandGroups" [(ngModel)]="selectedBrands" display = "chip" optionLabel = "name" optionGroupLabel = "groupName" optionGroupChildren = "brands" defaultLabel = "Select Software(s)" > </ p-multiSelect > |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; interface Brand { name: string; id: string; } interface BrandsGroup { groupName: string; brands: Brand[]; } @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styles: [ ` :host ::ng-deep .custom-ms .p-multiselect-label { width: 300px !important; } ` ] }) export class AppComponent { brandGroups: BrandsGroup[] = []; selectedBrands: Brand[] = []; ngOnInit() { this .brandGroups = [ { groupName: "Sports" , brands: [ { name: "Adidas" , id: "sports_1" }, { name: "Puma" , id: "sports_2" }, { name: "Nike" , id: "sports_3" }, { name: "HRX" , id: "sports_4" }, ] }, { groupName: "Transport" , brands: [ { name: "Delhivery" , id: "trans_1" }, { name: "DHL" , id: "trans_2" }, { name: "FedEx" , id: "trans_3" } ] }, { groupName: "Clothing" , brands: [ { name: "Peter England" , id: "clothing_1" }, { name: "Allen Solly" , id: "clothing_2" } ] } ]; } } |
- app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { FormsModule } from "@angular/forms" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { MultiSelectModule } from "primeng/multiselect" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, MultiSelectModule, FormsModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Ссылка: https://www.primefaces.org/primeng/multiselect