Angular PrimeNG Form Dropdown Editable 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 the Angular PrimeNG Form Dropdown Editable 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. When the Dropdown component is editable, i.e., the user is free to either choose an option from the given ones or enter a value manually.

Angular PrimeNG Form Dropdown Editable Component Properties:

• options: This property accepts an array of objects to display as dropdown options.
• placeholder: This property accepts a string value which is the placeholder for the dropdown input.
• showClear: This property specifies whether to show a clear icon to clear the value of the dropdown.
• optionLabel: It is the name of the label field of an option.
• editable: This boolean property specifies if the dropdown is editable.

Syntax:

<p-dropdown 
    [options]="..." 
    [(ngModel)]="..." 
    placeholder="..." 
    optionLabel="..."
    [editable]="true" 
    [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

Example 1: This is a basic example illustrating the use of an Angular PrimeNG Form Dropdown Editable Component.

app.component.html

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

<p-dropdown [(ngModel)]="selectedCountry"
            placeholder="Select A Country"
            optionLabel="label"
            [editable]="true"
  [options]="countries">
</p-dropdown>

app.component.ts

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

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

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

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

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

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: This is another example showing the use of the Angular PrimeNG Form Dropdown Editable Component.

app.component.html

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

<p-dropdown [(ngModel)]="selectedCity"
            placeholder="Select Your City"
            optionLabel="name"
            [editable]="true"
            [options]="cities">
</p-dropdown>

app.component.ts

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

interface City {
    name: string;
}

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

export class AppComponent {
    cities: City[] = [];
    selectedCity?: City;

    ngOnInit() {
        this.cities = [
            { name: "Agra" },
            { name: "Bareilly" },
            { name: "Kanpur" },
            { name: "Noida" },
            { name: "Bangalore" },
            { name: "Hyderabad" },
            { name: "Guwahati" },
            { name: "Mumbai" },
        ];
    }
}

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