Angular PrimeNG Form MultiSelect Сгруппированный компонент

Опубликовано: 24 Февраля, 2023

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

Technical Scripter Picked AngularJS

Angular PrimeNG Form MultiSelect Сгруппированный компонент

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ