Angular PrimeNG Form MultiSelect Advanced with Templating and Filtering 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 see how to use the Form MultiSelect Advanced with Templating and Filtering Component in Angular PrimeNG.

MultiSelect Component can be used to select multiple values from the menu. The Templating Component is mainly used to provide a template and the Filtering Component is used to filter the options from the given list.

Syntax:

<p-multiSelect [options]="countries" 
               [(ngModel)]="selectedCountries1" 
               defaultLabel="Select a Country"
               class="multiselect-custom">
    <ng-template let-value pTemplate="selectedItems">
        ...
    </ng-template>
</p-multiSelect>

Creating Angular application & module installation:

• Create an Angular application using the following command.

ng new appname

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

cd appname

• Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps, the project structure will look like the following:

Example1: This example demonstrates the basic usage of the Form MultiSelect Advanced with Templating and Filtering Component in Angular PrimeNG.

• app.component.html

HTML

<div style="text-align:center">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form MultiSelect
        Advanced with Templating and
        Filtering Component
    </h4>

    <h5>Templating</h5>
    <p-multiSelect [options]="countries"
                   [(ngModel)]="selectedCountries1"
                   defaultLabel="Select a Country"
                   optionLabel="name"
                   class="multiselect-custom">
        <ng-template let-value pTemplate="selectedItems">
            <div class="country-item country-item-value"
                 *ngFor="let option of selectedCountries1">
                <div>{{ option.name }}</div>
            </div>
            <div *ngIf=
      "!selectedCountries1 || selectedCountries1.length === 0"
                 class="country-placeholder">
                Select Countries
            </div>
        </ng-template>
        <ng-template let-country pTemplate="item">
            <div class="country-item">
                <div>{{ country.name }}</div>
            </div>
        </ng-template>
    </p-multiSelect>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import {
    trigger,
    state,
    style,
    transition,
    animate,
} from '@angular/animations';
import { SelectItem, PrimeNGConfig } from 'primeng/api';
import { CountryService } from './countryservice';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    providers: [CountryService],
})
export class AppComponent {
    selectedCities: string[] = [];
    selectedCountries1: string[] = [];
    selectedCountries2: string[] = [];
    items: SelectItem[];
    item: string;
    cities: any[];
    countries: any[];

    constructor(
        private countryService: CountryService,
        private primengConfig: PrimeNGConfig
    ) {
        this.items = [];
        this.countryService.getCountries().then((countries) => {
            this.items = countries;
        });

        this.countries = [
            { name: 'India', code: 'AU' },
            { name: 'Brazil', code: 'BR' },
            { name: 'China', code: 'CN' },
            { name: 'Egypt', code: 'EG' },
            { name: 'France', code: 'FR' },
            { name: 'Germany', code: 'DE' },
            { name: 'Spain', code: 'ES' },
            { name: 'United States', code: 'US' },
        ];
    }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

• 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: This is another example that demonstrates the use of the Form MultiSelect Advanced with Templating and Filtering Component in Angular PrimeNG by disabling the input option.

• app.component.html

HTML

<div style="text-align:center">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form MultiSelect
        Advanced with Templating and
        Filtering Component
    </h4>

    <h5>Templating</h5>
    <p-multiSelect [options]="countries"
                   [(ngModel)]="selectedCountries1"
                   defaultLabel="Select a Country"
                   optionLabel="name"
                   disabled="true"
                   class="multiselect-custom">
        <ng-template let-value pTemplate="selectedItems">
            <div class="country-item country-item-value"
                 *ngFor="let option of selectedCountries1">
                <div>{{ option.name }}</div>
            </div>
            <div *ngIf=
        "!selectedCountries1 || selectedCountries1.length === 0"
                 class="country-placeholder">
                Select Countries
            </div>
        </ng-template>
        <ng-template let-country pTemplate="item">
            <div class="country-item">
                <div>{{ country.name }}</div>
            </div>
        </ng-template>
    </p-multiSelect>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import {
    trigger,
    state,
    style,
    transition,
    animate,
} from '@angular/animations';
import { SelectItem, PrimeNGConfig } from 'primeng/api';
import { CountryService } from './countryservice';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    providers: [CountryService],
})
export class AppComponent {
    selectedCities: string[] = [];
    selectedCountries1: string[] = [];
    selectedCountries2: string[] = [];
    items: SelectItem[];
    item: string;
    cities: any[];
    countries: any[];

    constructor(
        private countryService: CountryService,
        private primengConfig: PrimeNGConfig
    ) {
        this.items = [];
        this.countryService.getCountries().then((countries) => {
            this.items = countries;
        });

        this.countries = [
            { name: 'India', code: 'AU' },
            { name: 'Brazil', code: 'BR' },
            { name: 'China', code: 'CN' },
            { name: 'Egypt', code: 'EG' },
            { name: 'France', code: 'FR' },
            { name: 'Germany', code: 'DE' },
            { name: 'Spain', code: 'ES' },
            { name: 'United States', code: 'US' },
        ];
    }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

• 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:

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