Angular PrimeNG Form Dropdown Value Binding Component

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Form Dropdown Value Binding Component.

The Form Dropdown Component provides the user with a list of options from which any one option can be selected by the user. The optionValue property of the dropdown can be used to specify the property of the model to be used as the value.

Angular PrimeNG Form Dropdown Value Binding Properties:

• options: This property accepts an array of objects to show dropdown options.
• scrollHeight: It defines the scroll height of the dropdown overlay panel.
• optionLabel: It is the property of an option object to display as dropdown option label.
• optionValue: It is the property of an option object to display as dropdown option value.

Syntax:

<p-dropdown 
    [options]="..." 
    optionValue="..."
    [(ngModel)]="..."
    optionLabel="...">
</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: In this example, we binded the value of the dropdown to the id property of the car by setting the optionValue to “id”.

• app.component.html:

HTML

<h1 style="color:green">GeeksforGeeks</h1>
<h3>
    Angular PrimeNG Form Dropdown Value Binding
</h3>
<h3>Value binded to <i>id </i> property of the Car</h3>

<p-dropdown
    [options]="availableCars"
    [(ngModel)]="selectedCar"
    optionLabel="name"
    optionValue="id">
</p-dropdown>
<h4>Selected Car ID: {{selectedCar}}</h4>

• app.component.ts:

Javascript

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

interface Car{
    id: Number;
    name: String;
    val: String;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    availableCars: Car[] = [];
    selectedCar: Car = this.availableCars[0];

    ngOnInit()
    {
        this.availableCars = [
            {
                id: 1,
                name: "Vitara Brezza",
                val: "VITARA"
            },
            {
                id: 2,
                name: "Mahindra Thar",
                val: "THAR"
            },
            {
                id: 3,
                name: "Tata Nexon",
                val: "NEXON"
            },
            {
                id: 4,
                name: "Toyota Fortuner",
                val: "FORTUNER"
            },
            {
                id: 5,
                name: "Hyundai Creta",
                val: "CRETA"
            },
            {
                id: 6,
                name: "Maruti Baleno",
                val: "BALENO"
            },
            {
                id: 7,
                name: "Maruti Ertiga",
                val: "ERTIGA"
            }
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { DropdownModule } from "primeng/dropdown";

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

Output:

Example 2: In the below example, the val property of the car is used as the value. The optionValue property of the dropdown is set to “val”.

• app.component.html:

HTML

<h1 style="color:green">GeeksforGeeks</h1>
<h3>
    Angular PrimeNG Form Dropdown Value Binding
</h3>
<h3>Value binded to <i>val </i> property of the Car</h3>

<p-dropdown
    [options]="availableCars"
    optionValue="val"
    [(ngModel)]="selectedCar"
    scrollHeight="300px"
    optionLabel="name">
</p-dropdown>

<h4>Selected Car Val: {{selectedCar}}</h4>

• app.component.ts:

Javascript

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

interface Car{
    id: Number;
    name: String;
    val: String;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    availableCars: Car[] = [];
    selectedCar: Car = this.availableCars[0];

    ngOnInit()
    {
        this.availableCars = [
            {
                id: 1,
                name: "Vitara Brezza",
                val: "VITARA"
            },
            {
                id: 2,
                name: "Mahindra Thar",
                val: "THAR"
            },
            {
                id: 3,
                name: "Tata Nexon",
                val: "NEXON"
            },
            {
                id: 4,
                name: "Toyota Fortuner",
                val: "FORTUNER"
            },
            {
                id: 5,
                name: "Hyundai Creta",
                val: "CRETA"
            },
            {
                id: 6,
                name: "Maruti Baleno",
                val: "BALENO"
            },
            {
                id: 7,
                name: "Maruti Ertiga",
                val: "ERTIGA"
            }
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { DropdownModule } from "primeng/dropdown";

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

Output:

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