Angular PrimeNG Form MultiSelect Grouped Component

PrimeNG is an AngularJS component library developed by PrimeFaces. It provides developers to select from a wide range of already implemented themes and UI components for their applications. In this article, we will see the Angular PrimeNG Form MultiSelect Grouped Component.

The MultiSelect Component allows the user to select multiple options from the set of provided options. The grouping of the MultiSelect option allows us to group similar options together which helps users to find the relevant option quickly and betters the user experience. For grouping, the group property must be set to true.

Angular PrimeNG Form MultiSelect Grouped Mode Properties:

• options: This property is used to pass an array of objects to be displayed as MultiSelect options.
• group: This is a boolean property used to specify if the grouped mode is enabled or disabled.
• optionLabel: This is the property of the nested object of options which will be used as the label of the option.
• optionGroupLabel: This is the property of the options object which will be used as the label of the group.
• optionGroupChildren: This is the property of the options object which contains the group children.
• defaultLabel: This property accepts a string that is used as a placeholder when no item is selected.

Syntax:

<p-multiSelect
    [group]="true"
    [options]="..." 
    [(ngModel)]="..."
    optionLabel="..."
    optionGroupLabel="..."
    optionGroupChildren="..."
    defaultLabel="...">
</p-multiSelect>

Creating the Application and Installing the Required Modules:

Step 1: Create the Angular app using the following command.

ng new my_app

Step 2: After creating the app, move to the project folder using the below command.

cd new_app

Step 3: Finally, Install the following modules in your project directory

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

Project Structure: The project structure will be shown in the picture below.

Project Structure

Example 1: This is a simple example showing how to group Multiselect options together.

• 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]="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 { }

Output:

Example 2: This is another example illustrating the grouping of options together using grouped properties.

• 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 { }

Output:

Reference: https://www.primefaces.org/primeng/multiselect