Angular PrimeNG Form Dropdown 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. This article will show us how to use the calendar component in angular ngx bootstrap.

Dropdown Custom Content Component: It is used for both selected options and the options list can be templated to provide customized representation. We can use the selectedItem template to customize the selected label display and the item template to change the content of the options in the dropdown panel. 

Syntax:

<ng-template pTemplate="selectedItem">...</ng-template>

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: 

Example 1: In the below code, we will be using the above syntax to demonstrate the use of the Angular PrimeNG Form Dropdown Custom Content Component.

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 Dropdown
        Custom Content Component
    </h4>

    <p-dropdown [options]="groupedCities"
        [(ngModel)]="selectedCity3"
        placeholder="Select a City"
        [group]="true">

        <ng-template let-group pTemplate="group">
            <div class="p-d-flex p-ai-center">
                <span>{{ group.label }}</span>
            </div>
        </ng-template>
    </p-dropdown>
</div>

app.component.ts

Javascript

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { SelectItem } from 'primeng/api';
import { SelectItemGroup } from 'primeng/api';

interface City {
    name: string,
    code: string
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    cities: City[];
    selectedCity1: City;
    selectedCity2: City;
    selectedCity3: string;
    selectedCountry: string;
    countries: any[];
    groupedCities: SelectItemGroup[];
    items: SelectItem[];
    item: string;

    constructor() {
        this.items = [];
        for (let i = 0; i < 10000; i++) {
            this.items.push({
                label: 'Item ' + i,
                value: 'Item ' + i
            });
        }

        this.cities = [
            { name: 'India', code: 'NY' },
            { name: 'Rome', code: 'RM' },
            { name: 'London', code: 'LDN' },
            { name: 'Istanbul', code: 'IST' },
            { name: 'Paris', code: 'PRS' }
        ];

        this.groupedCities = [
            {
                label: 'India', value: 'IND',
                items: [
                    { label: 'Mumbai', value: 'Mumbai' },
                    { label: 'Varanasi', value: 'Varanasi' },
                    { label: 'Nashik', value: 'Nashik' },
                    { label: 'Delhi', value: 'Delhi' }
                ]
            },
            {
                label: 'USA', value: 'us',
                items: [
                    { label: 'Chicago', value: 'Chicago' },
                    { label: 'Los Angeles', value: 'Los Angeles' },
                    { label: 'New York', value: 'New York' },
                    { label: 'San Francisco', value: 'San Francisco' }
                ]
            },
            {
                label: 'Japan', value: 'jp',
                items: [
                    { label: 'Kyoto', value: 'Kyoto' },
                    { label: 'Osaka', value: 'Osaka' },
                    { label: 'Tokyo', value: 'Tokyo' },
                    { label: 'Yokohama', value: 'Yokohama' }
                ]
            }
        ];

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

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 { DropdownModule } from 'primeng/dropdown';

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

export class AppModule { }

app.component.scss

CSS

:host ::ng-deep .p-dropdown {
    width: 14rem;
}

Output:

Example 2: In the below code, we will be using the above syntax to demonstrate the use of the Angular PrimeNG Form Dropdown Custom Content Component.

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 Dropdown
        Custom Content Component
    </h4>

    <p-dropdown [options]="groupedCities"
        [(ngModel)]="selectedCity3"
        placeholder="Select a City"
        [group]="true">

        <ng-template let-group pTemplate="selectedItem">
            <div class="p-d-flex p-ai-center">
                <span>{{ group.label }}</span>
            </div>
        </ng-template>
    </p-dropdown>
</div>

app.component.ts

Javascript

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { SelectItem } from 'primeng/api';
import { SelectItemGroup } from 'primeng/api';

interface City {
    name: string,
    code: string
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    cities: City[];
    selectedCity1: City;
    selectedCity2: City;
    selectedCity3: string;
    selectedCountry: string;
    countries: any[];
    groupedCities: SelectItemGroup[];
    items: SelectItem[];
    item: string;

    constructor() {
        this.items = [];
        for (let i = 0; i < 10000; i++) {
            this.items.push({
                label: 'Item ' + i,
                value: 'Item ' + i
            });
        }

        this.cities = [
            { name: 'India', code: 'NY' },
            { name: 'Rome', code: 'RM' },
            { name: 'London', code: 'LDN' },
            { name: 'Istanbul', code: 'IST' },
            { name: 'Paris', code: 'PRS' }
        ];

        this.groupedCities = [
            {
                label: 'India', value: 'IND',
                items: [
                    { label: 'Mumbai', value: 'Mumbai' },
                    { label: 'Varanasi', value: 'Varanasi' },
                    { label: 'Nashik', value: 'Nashik' },
                    { label: 'Delhi', value: 'Delhi' }
                ]
            },
            {
                label: 'USA', value: 'us',
                items: [
                    { label: 'Chicago', value: 'Chicago' },
                    { label: 'Los Angeles', value: 'Los Angeles' },
                    { label: 'New York', value: 'New York' },
                    { label: 'San Francisco', value: 'San Francisco' }
                ]
            },
            {
                label: 'Japan', value: 'jp',
                items: [
                    { label: 'Kyoto', value: 'Kyoto' },
                    { label: 'Osaka', value: 'Osaka' },
                    { label: 'Tokyo', value: 'Tokyo' },
                    { label: 'Yokohama', value: 'Yokohama' }
                ]
            }
        ];

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

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 { DropdownModule } from 'primeng/dropdown';

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

export class AppModule { }

app.component.scss

CSS

:host ::ng-deep .p-dropdown {
    width: 14rem;
}

Output:

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