Angular PrimeNG Form MultiSelect Value Binding 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 discuss the Angular PrimeNG Form MultiSelect Value Binding Component.

The MultiSelect Component allows the user to select multiple options from the set of provided options. The value of an option in MultiSelect is bounded to the model itself but we can use the optionValue property of Multiselect to pass the custom value for the options.

Angular PrimeNG Form MultiSelect Value Binding Mode Properties:

• options: This property accepts an array of objects to display as Multiselect options.
• optionLabel: This property specifies a property of the options object to display the labels of the options.
• optionValue: This property specifies a property of the options object to get the value of the options.
• defaultLabel: This property is used to specify the placeholder string for the MultiSelect component.
• optionGroupLabel: This property specifies a property of the options object to get the label of the groups when the multiselect is in grouped mode.
• optionGroupChildren: This property specifies a property of the options object to get the children of the groups when the multiselect is in grouped mode.

Syntax:

<p-multiSelect
    [options]="..." 
    [(ngModel)]="..."
    optionLabel="..."
    optionValue="..."
    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.

Example 1: This is a simple example illustrating value binding in Multiselect using the optionValue property. Here we set the optionValue to “id” so it will use the id property of the option as the value. We set the id of “Puma” and “HRX” options to a single string so whenever one gets selected/deselected the other gets too. This is just to show that the value is bound properly.

• app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Value Binding Component
</h5>

<p-multiSelect
    class="custom-ms"
    [options]="brands"
    [(ngModel)]="selectedBrands"
    optionLabel="name"
    optionValue="id"
    defaultLabel="Select Brand(s)">
</p-multiSelect>

• app.component.ts

Javascript

import { Component } from "@angular/core";

interface Brand {
    name: string;
    id: string;
}

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 300px !important;
        }
        `
    ]
})

export class AppComponent {

    brands: Brand[] = [];
    selectedBrands: Brand[] = [];

    ngOnInit() {
        this.brands = [

            {
                name: "Adidas",
                id: "sports_1"
            },
            {
                name: "Puma",
                id: "sports_2"
            },
            {
                name: "Nike",
                id: "sports_3"
            },
            {
                name: "HRX",
                id: "sports_2"
            },

            {
                name: "Delhivery",
                id: "trans_1"
            },
            {
                name: "DHL",
                id: "trans_2"
            },
            {
                name: "FedEx",
                id: "trans_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: In this example, we used the grouping of the options and set the optionValue property to “id” so the value of the options will be taken from the id property. Here, we set the id of “Adidas” and “Puma” to a single string so whenever one gets selected other’s checkbox also turns on and vice versa.

• app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Value Binding Component
</h5>

<p-multiSelect
    class="custom-ms"
    [group]="true"
    [options]="brandGroups"
    [(ngModel)]="selectedBrands"
    optionLabel="name"
    optionValue="id"
    optionGroupLabel="groupName"
    optionGroupChildren="brands"
    defaultLabel="Select Brand(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_1"
                    },
                    {
                        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