Angular PrimeNG Form MultiSelect Value Binding Component
Last Updated :
29 Nov, 2022
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.
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>
|
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"
}
];
}
}
|
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.
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>
|
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"
}
]
}
];
}
}
|
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...