Angular PrimeNG Form MultiSelect Custom Content Component

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 Angular PrimeNG Form MultiSelect Custom Content Component.

The Multiselect component is used to provide the user with a list of options where one or more than one options can be selected by the user.

Form MultiSelect Custom Content: Define an ng-template named item whose local ng-template variable identifies an option in the options collection for custom content support when displaying options. In a similar vein, the selectedItems template can be customized to show the selected options. 

Templates for the header, filter, footer, and empty filter can also provide a customized message for each. A group template is also available to customize the option groups when grouping is enabled. The options instance is set as the default local template variable in all templates.

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

ng serve --save

Example 1: In the below code, we will be using the above properties to demonstrate the use of the Angular PrimeNG Form MultiSelect Custom Content Component using pTemplate=”item” and a custom ng-template as selectedItems. 

• app.component.html:

HTML

<div style="text-align: center;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h4>Angular PrimeNG Form MultiSelect Custom Content Component.</h4>

    <p-multiSelect [options]="Geeks" [(ngModel)]="selectedCourses"
        defaultLabel="Select a Course"
        optionLabel="name"
        class="multiselect-custom">
        <ng-template let-value pTemplate="selectedItems">
            <div class="country-item country-item-value"
                    *ngFor="let option of selectedCourses">
                <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                    [class]="'flag flag-' + option.code.toLowerCase()" />
                <div>{{ option.name }}</div>
            </div>
            <div *ngIf="!selectedCourses || selectedCourses.length === 0"
                class="country-placeholder">
                Select Courses
            </div>
        </ng-template>
        <ng-template let-country pTemplate="item">
            <div class="country-item">
                <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                    [class]="'flag flag-' + country.code.toLowerCase()" />
                <div>{{ country.name }}</div>
            </div>
        </ng-template>
    </p-multiSelect>
</div>

• app.component.ts:

Javascript

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
})

export class AppComponent {
    Geeks: any[];

    constructor( ) {
        this.Geeks = [
          { name: "DSA Self Paced", code: "DSA" },
          { name: "DBMS", code: "DBMS" },
          { name: "CN", code: "CN" },
          { name: "OS", code: "OS" },
          { name: "System Design", code: "SD" },
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import {MultiSelectModule} from 'primeng/multiselect';

@NgModule({
    imports: [
        BrowserAnimationsModule,
        MultiSelectModule,
        FormsModule,
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})

export class AppModule { }

Output:

Example 2: In the below code, we will be using the above properties to demonstrate the use of the Angular PrimeNG Form MultiSelect Custom Content Component using header and footer pTemplates.

• app.component.html:

HTML

<div style="text-align: center;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h4>Angular PrimeNG Form MultiSelect Custom Content Component.</h4>

    <p-multiSelect
        [options]="Geeks"
        [(ngModel)]="selectedCourses"
        defaultLabel="Select a Course"
        optionLabel="name"
        class="multiselect-custom">
          <ng-template pTemplate="header">
            GeeksforGeeks
        </ng-template>
        <ng-template let-value pTemplate="selectedItems">
            <div class=
                "country-item country-item-value"
                *ngFor="let option of selectedCourses">
                <img src=
                "https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                 [class]="'flag flag-' + option.code.toLowerCase()"/>
                 <div>{{ option.name }}</div>
            </div>
            <div *ngIf="!selectedCourses || selectedCourses.length === 0"
                class="country-placeholder">
                Select Courses
            </div>
        </ng-template>
        <ng-template let-country pTemplate="item">
            <div class="country-item">
                <img src=
                     "https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                      [class]="'flag flag-' + country.code.toLowerCase()"/>
                <div>{{ country.name }}</div>
            </div>
        </ng-template>
        <ng-template pTemplate="footer">
            Copyright@GeeksforGeeks
        </ng-template>
    </p-multiSelect>
</div>

• app.component.ts:

Javascript

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
})

export class AppComponent {
    Geeks: any[];

    constructor( ) {
        this.Geeks = [
          { name: "DSA Self Paced", code: "DSA" },
          { name: "DBMS", code: "DBMS" },
          { name: "CN", code: "CN" },
          { name: "OS", code: "OS" },
          { name: "System Design", code: "SD" },
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import {MultiSelectModule} from 'primeng/multiselect';

@NgModule({
    imports: [
        BrowserAnimationsModule,
        MultiSelectModule,
        FormsModule,
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})

export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/multiselect