Angular PrimeNG Form MultiSelect Component

Last Updated : 21 Dec, 2022

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the MultiSelect Component in Angular PrimeNG.

The Multiselect Component provides the user with a list of options where the user can select one or more options. The properties of the MultiSelect Component are listed below.

Angular PrimeNG Form MultiSelect Properties:

appendTo: It is used to define the target element to attach the overlay.
ariaFilterLabel: It is used to define the string that labels the filter input.
label: It is used to define the label of the input for accessibility.
ariaLabelledBy: It is used to define the relationships between the component and label(s) where its value should be one or more element IDs.
autofocusFilter: It is used to define the focus of the filter element when the overlay is shown.
autoZIndex: It is used to define the automatic managing layer.
baseZIndex: It is used to define the base zIndex value to use in layering.
defaultLabel: It is used to define the label to display when there are no selections.
dataKey: It is used to define the property to uniquely identify a value in options.
disabled: It is used to specify that the element should be disabled.
displaySelectedLabel: It is used to show labels of selected item labels or use default labels.
dropdownIcon: It is used to define the icon class of the dropdown icon.
emptyFilterMessage: It is used to define the text to display when filtering does not return any results.
filter: It is used to display an input field to filter the items on keyup.
filterMatchMode: It is used to define how the items are filtered.
filterValue: It is used to specify, filter displays with this value.
filterLocale: It is used to define the locale to use in filtering.
filterBy: It is used to define the field or fields (comma separated) to search against.
filterPlaceHolder: It is used to define the placeholder of the filter input.
hideTransitionOptions: It is used to define the transition options of the hide animation.
inputId: It is used to define the identifier of the focus input to match a label defined for the component.
maxSelectedLabels: It is used to define how many selected item labels to show at most.
name: It is used to define the name of the input element.
options: It is used to define the array of objects to display as the available options.
optionLabel: It is used to define the name of the label field of an option.
optionValue: It is used to define the name of the value field of an option.
optionDisabled: It is used to define the name of the disabled field of an option.
optionGroupLabel: It is used to define the name of the label field of an option group.
optionGroupChildren: It is used to define the name of the options field of an option group.
group: It is used to display options as grouped when nested options are provided.
overlayVisible: It is used to define the Specify the visibility of the options panel.
panelStyle: It is used to define the Inline style of the overlay panel.
placeholder: It is used to define the label to display when there are no selections.
readonly: It is used to define the specifications so that the component cannot be edited.
emptyMessage: It is used to define the text to display when there is no data.
emptyFilterMessage: It is used to define the text to display when filtering does not return any results.
resetFilterOnHide: It is used to clear the filter value when hiding the dropdown.
scrollHeight: It is used to define the height of the viewport in pixels, a scrollbar is defined if the height of the list exceeds this value.
selectedItemsLabel: It is used to define the label to display after exceeding max selected labels
selectionLimit: It is used to define the number of maximum options that can be selected.
showHeader: It is used to define whether to show the header.
showTransitionOptions: It is used to define the transition options of the show animation.
showToggleAll: It is used to show the checkbox at the header to toggle all items at once.
style: It is used to define the inline style of the element.
styleClass: It is used to define the style class of the element.
tabindex: It is used to define the index of the element in tabbing order.
tooltip: It is used to define the advisory information to display in a tooltip on hover.
tooltipStyleClass: It is used to define the style class of the tooltip.
tooltipPosition: It is used to define the position of the tooltip, valid values are right, left, top, and bottom.
tooltipPositionStyle: It is used to define the type of CSS position.
showClear: It is used to define the clear icon that is displayed to clear the value.
virtualScroll: It is used to define the virtual scroll.
virtualScrollItemSize: It is used to define the height of an item in the list for VirtualScrolling.
virtualScrollOptions: It is used to define the properties of the scroller component and can be used like an object in it.
lazy: It is used to define if data is loaded and interacted with in a lazy manner.

Angular PrimeNG Form MultiSelect Events:

onClick: This event accepts a callback function which is called when the user clicks on the MultiSelect component.
onChange: This event takes a callback function as its value. That callback is triggered when the value of the component changes.
onFilter: The callback function passed to this event is triggered when the Multiselect data is filtered.
onFocus: This event’s callback function is invoked when the MultiSelect component comes into focus.
onBlur: This event’s callback function is invoked when the MultiSelect component goes out of focus.
onPanelShow: The callback function passed to this event is triggered when the MultiSelect overlay panel becomes visible.
onPanelHide: The callback function passed to this event is triggered when the MultiSelect overlay panel becomes hidden.
onClear: The callback passed to this event is invoked when the Multiselect input is cleared using the clear icon.
onLazyLoad: The callback passed to this event is invoked when new data is loaded when the lazy load is enabled.

Angular PrimeNG Form MultiSelect Templates:

item: It is used to define the item on the menu.
group: It is used to define the group of the menu
selectedItems: It is used to define the selected item of the menu.
header: It is used to define the header of the menu.
filter: It is used to define the filter of the menu.
empty: It is used to define an empty item.
emptyfilter: It is used to filter the empty menu.
footer: It is used to define the footer of the menu.
loader: It is used to define the loader of the menu.

Angular PrimeNG Form MultiSelect Styling:

p-multiselect: It is the container of the multi-select component.
p-multiselect-label-container: It is the container of the label for displaying the selected items.
p-multiselect-label: It is the label for displaying the selected items.
p-multiselect-trigger: This class is applied on the dropdown button.
p-multiselect-filter-container: It is the container of the filter input of the MultiSelect component.
p-multiselect-panel: It is the class applied to the panel for displaying the MultiSelect items.
p-multiselect-items: It is the container of the list of items.
p-multiselect-item: This class is applied to the items of the MultiSelect component.
p-multiselect-open: It is the container of the multiselect component when its panel is visible.

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: The project structure will look like the following:

Steps to run the application: Run the below command to see the output

npm run

Example 1: Below is the example code that illustrates the use of Angular PrimeNG Form MultiSelect Component using the group property.

app.component.html:

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h5>Angular PrimeNG Form MultiSelect Component</h5>
 
<p-multiSelect
    class="custom-ms"
    [group]="true"
    [options]="brandGroups"
    [(ngModel)]="selectedBrands"
    display="chip"
    optionLabel="name"
    optionGroupLabel="groupName"
    optionGroupChildren="brands"
    defaultLabel="Select Items">
</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 { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import {MultiSelectModule} from 'primeng/multiselect';
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MultiSelectModule,
        FormsModule,
        HttpClientModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
 
export class AppModule { }

Output:

Example 2: Below is another example code that illustrates the use of Angular PrimeNG Form MultiSelect Component using the animation configuration.

app.component.html:

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h5>Angular PrimeNG Form MultiSelect Component</h5>
 
<p-multiSelect class="custom-ms"
    [options]="cars"
    [(ngModel)]="selected"
    showTransitionOptions="1s linear"
    defaultLabel="Select Car(s)"
    optionLabel="name">
</p-multiSelect>

app.component.ts:

Javascript

import { Component } from "@angular/core";
 
interface Car {
    id: number;
    name: string;
}
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 400px !important;
        }
        `
    ]
})
 
export class AppComponent {
 
    cars: Car[] = [];
    selected: Car[] = [];
 
    ngOnInit() {
        this.cars = [
            {
                id: 1,
                name: "Vitara Brezza"
            },
            {
                id: 2,
                name: "Audi R8"
            },
            {
                id: 3,
                name: "Swift Dezire"
            },
            {
                id: 4,
                name: "Baleno"
            },
            {
                id: 5,
                name: "Ertiga"
            },
            {
                id: 6,
                name: "Seltos"
            },
        ];
    }
}

app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import {MultiSelectModule} from 'primeng/multiselect';
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MultiSelectModule,
        FormsModule,
        HttpClientModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
 
export class AppModule { }