Angular PrimeNG Form MultiSelect Templates 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 the Form MultiSelect Templates Component in Angular PrimeNG, along with knowing the various templates provided with their syntaxes that will be used in the code example.

The MultiSelect Component is used to select multiple values from the menu. There are various templates provided by the Angular PrimeNG Form, in order to organize in a structured way & can be grouped, in order to categorize the form.

Angular PrimeNG Form MultiSelect Templates Component:

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

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 successful installation, the following project structure will appear:

Example 1: This example demonstrates the basic use of the Form MultiSelect Templates 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
        Templates Component
      </h4>

    <h5>Basic</h5>
    <p-multiSelect [options]="cities"
                   [(ngModel)]="selectedCities1"
                   defaultLabel="Select a City"
                   optionLabel="name">
        <ng-template pTemplate="header">
            Header Content
        </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.cities = [
            { name: "Nallasopara", code: "Nallasopara" },
            { name: "Naigaon", code: "Naigaon" },
            { name: "Mira road", code: "MR" },
            { name: "Vasai", code: "VASAI" },
            { name: "Virar", code: "virar" }
        ];
    }

    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:

Example2: This is another example that demonstrates the usage of the Form MultiSelect Templates 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
        Templates Component
    </h4>

    <h5>Basic</h5>
    <p-multiSelect [options]="cities"
                   [(ngModel)]="selectedCities1"
                   defaultLabel="Select a City"
                   optionLabel="name">
        <ng-template pTemplate="footer">
            footer Content
        </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.cities = [
            { name: "Nallasopara", code: "Nallasopara" },
            { name: "Naigaon", code: "Naigaon" },
            { name: "Mira road", code: "MR" },
            { name: "Vasai", code: "VASAI" },
            { name: "Virar", code: "virar" }
        ];
    }

    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