Angular PrimeNG Form MultiSelect Selected Items Label Component

Angular PrimeNG is a collection of hundreds of UI components that can be used by developers to speed up the development process of their Applications. It is developed by PrimeTek Informatics also known as PrimeFaces. In this article, we will be seeing Angular PrimeNG Form MultiSelect Selected Items Label Component.

The MultiSelect Component allows users to select multiple options from the set of provided options. By default, When the selectedItemsLabel property is not specified and the maximum number of the selected items reaches, an ellipsis is used to show text overflow. This can be changed by specifying a template string using the selectedItemsLabel property where the number of selected items can be accessed using {0} in the template.

Angular PrimeNG Form MultiSelect Selected Items Label Properties:

• options: It accepts an array of objects to display as multi-select options.
• selectedItemsLabel: This property is used to specify a template to display the label. The {0} can be used to access the number of selected items. The default value of this property is “ellipsis” which displays an ellipsis to indicate the overflow of the text.
• maxSelectedLabel: It specifies the max number of items that can be selected before the selectedItemsLabel template is shown.
• defaultLabel: It is used to specify the placeholder text for the MultiSelect component.
• optionLabel: This is used to specify the property of the object to show as the label of the multi-select options.

Syntax:

<p-multiSelect
    [options]="..." 
    [(ngModel)]="..."
    selectedItemsLabel="No. of Selected Items: {0}"
    [maxSelectedLabels]="3" 
    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 selectedItemsLabel property to “ellipsis”, the default value, which will show the ellipsis to show the text overflow.

• app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Selected Items Label Component
</h5>

<p-multiSelect
    class="custom-ms"
    [options]="cars"
    [(ngModel)]="selected"
    selectedItemsLabel="ellipsis"
    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 { 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 specify a template “No. of Selected Items: {0}” as the value of the selectedItemsLabel property and set the maxSelectedLabels to 3. So whenever more than 3 items will be selected the template will be used to display the custom message.

• app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Selected Items Label Component
</h5>

<p-multiSelect
    class="custom-ms"
    [options]="cars"
    [(ngModel)]="selected"
    selectedItemsLabel="No. of Selected Items: {0}"
    [maxSelectedLabels]="3"
    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 { 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