Open In App

Angular PrimeNG Form MultiSelect Advanced with Templating and Filtering Component

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 27 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads