Angular PrimeNG Form MultiSelect Chips Display Component

Angular PrimeNG is a free and open-source framework with various components that Angular developers can use in their applications to enhance the user experience and speed up the development as they do not have to write everything from the ground up. In this article, we will be discussing Angular PrimeNG Form MultiSelect Chips Display Component.

The MultiSelect Component allows users to select multiple options from the set of provided options. When the Multiselect is in the Chips Display Mode, the selected options are displayed as chips with a remove icon otherwise by default the selected options are displayed in plain text separated with a comma. To enable the chips display mode, the display property can be set to “chip”.

Angular PrimeNG Form MultiSelect Chips Display Component:

• options: It is used to pass an array of objects to display as multi-select options.
• display: When this property is set to “chip”, the selected items will be displayed as chips.
• defaultLabel: It is used to specify a string that will be displayed when no item is selected.
• optionLabel: It is used to specify the name of the property of the object that will be used as the option label.
• optionDisabled: It is used to specify the name of the property of the object that will be used to decide if the option is disabled.

Syntax:

<p-multiSelect 
    [options]="..." 
    display="chip" 
    [(ngModel)]="..." 
    defaultLabel="..." 
    optionLabel="...">
</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 command written below.

cd new_app

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

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

Project Structure: Now, the project structure will as shown in the below picture.

Project Structure

Example 1: In this example, we set the display property of the MultiSelect component to “chip” so the selected items will be displayed as chips and the overflowed items will be replaced by an ellipsis.

• app.component.html

HTML

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

<p-multiSelect
    class="custom-ms"
    [options]="courses"
    display="chip"
    [(ngModel)]="selected"
    defaultLabel="Select Course(s)"
    optionLabel="name">
</p-multiSelect>

• app.component.ts

Javascript

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

interface Course {
    id: number;
    name: string;
    price: string;
}

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

    courses: Course[] = [];
    selected: Course[] = [];

    ngOnInit() {
        this.courses = [
            {
                id: 1,
                name: "Self Paced DSA",
                price: "3,899"
            },
            {
                id: 2,
                name: "CIP - Self Paced",
                price: "6,999"
            },
            {
                id: 3,
                name: "System Design - Live",
                price: "10,999"
            },
            {
                id: 4,
                name: "CP - Live",
                price: "10,999"
            },
            {
                id: 5,
                name: "C++ Self Paced",
                price: "1,699"
            },
            {
                id: 6,
                name: "GATE 2024",
                price: "11,999"
            }
        ];
    }
}

• 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 optionDisabled property of the Multiselect to specify a label for the disabled option which when set to false disables the multi-select option.

• app.component.html

HTML

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

<p-multiSelect
    class="custom-ms"
    [options]="courses"
    display="chip"
    [(ngModel)]="selected"
    optionDisabled="isActive"
    defaultLabel="Select Course(s)"
    optionLabel="name">
</p-multiSelect>

• app.component.ts

Javascript

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

interface Course {
    id: number;
    name: string;
    price: string;
    isActive: boolean;
}

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

    courses: Course[] = [];
    selected: Course[] = [];

    ngOnInit() {
        this.courses = [
            {
                id: 1,
                name: "Self Paced DSA",
                price: "3,899",
                isActive: false
            },
            {
                id: 2,
                name: "CIP - Self Paced",
                price: "6,999",
                isActive: true
            },
            {
                id: 3,
                name: "System Design - Live",
                price: "10,999",
                isActive: true
            },
            {
                id: 4,
                name: "CP - Live",
                price: "10,999",
                isActive: false
            },
            {
                id: 5,
                name: "C++ Self Paced",
                price: "1,699",
                isActive: false
            },
            {
                id: 6,
                name: "GATE 2024",
                price: "11,999",
                isActive: true
            }
        ];
    }
}

• 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