Angular PrimeNG Form Dropdown Basic Component

Angular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers to cut down the development time and focus on other important areas of the application. In this article, we will see Angular PrimeNG Form Dropdown Basic Component.

In a Dropdown Component, we provide users with a list of options out of which users can select any one option. It is generally used in implementing filters, asking for the country of the user, etc.

Angular PrimeNG Form Dropdown Basic Properties:

• options: This property accepts an array of objects to display as the dropdown options.
• placeholder: This property is used to set the placeholder for the dropdown field.
• showClear: When this property is set to true, a clear icon will be shown to clear the selected value.
• optionLabel: It is the name of the label field of an option.

Syntax:

<p-dropdown 
    [options]="..." 
    [(ngModel)]="..." 
    placeholder="..." 
    optionLabel="..." 
    [showClear]="true | false">
</p-dropdown>

Creating Angular Application and Installing the Module:

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

• To run the above file run the below command:

ng serve --save

Example 1: This is a simple example showing the use of the Angular PrimeNG Form Dropdown Basic Component.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
  Angular PrimeNG Form
  Dropdown Basic Component
</h4>

<p-dropdown [(ngModel)]="selectedCountry"
            placeholder="Select Your Country"
            optionLabel="name"
            [showClear]="true"
            [options]="countries">
</p-dropdown>

app.component.ts

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

interface Country {
    name: string;
    code: string;
}

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

export class AppComponent {
    countries: Country[] = [];
    selectedCountry?: Country;

    ngOnInit() {
        this.countries = [
            {
                name: "India",
                code: "+91"
            },
            {
                name: "Nepal",
                code: "+977"
            },
            {
                name: "Bhutan",
                code: "+975"
            },
            {
                name: "Russia",
                code: "+7"
            },
            {
                name: "Bangladesh",
                code: "+880"
            },
            {
                name: "Canada",
                code: "+1"
            }
        ];
    }
}

app.module.ts

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,
        FormsModule,
        DropdownModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In this example, we set the showClear property to false so the clear icon will not be shown.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
    Angular PrimeNG Form
    Dropdown Basic Component
</h4>

<p-dropdown [(ngModel)]="selectedCountry"
            placeholder="Select Your Country"
            optionLabel="name"
            [showClear]="false"
            [options]="countries">
</p-dropdown>

app.component.ts

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

interface Country {
    name: string;
    code: string;
}

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

export class AppComponent {
    countries: Country[] = [];
    selectedCountry?: Country;

    ngOnInit() {
        this.countries = [
            {
                name: "India",
                code: "+91"
            },
            {
                name: "Nepal",
                code: "+977"
            },
            {
                name: "Bhutan",
                code: "+975"
            },
            {
                name: "Russia",
                code: "+7"
            },
            {
                name: "Bangladesh",
                code: "+880"
            },
            {
                name: "Canada",
                code: "+1"
            }
        ];
    }
}

app.module.ts

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,
        FormsModule,
        DropdownModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/dropdown