Angular PrimeNG Form Dropdown Events

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 Events.

The Dropdown Component is used to 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. It is used to make to choose the objects from the given list of items. 

Angular PrimeNG Form Dropdown Events Component:

• onClick: It is a callback that is fired when the component is clicked.
• onChange: It is a callback that is fired when the value of the dropdown changes.
• onFilter: It is a callback that is fired when data is filtered.
• onFocus: It is a callback that is fired when dropdown gets focused.
• onBlur: It is a callback that is fired when the dropdown loses focus.
• onShow: It is a callback that is fired when the dropdown overlay gets visible.
• onHide: It is a callback that is fired when the dropdown overlay gets hidden.

Syntax:

<p-dropdown
     (event)=function()>
</p-dropdown>

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: It will look like the following

Steps to run the application: Run the below command to see the output

ng serve --save

Example 1: In this example, we will learn about Angular PrimeNG Form Dropdown Events Component onClick function

• app.component.html:

HTML

<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Angular PrimeNG Form Dropdown Events Component.</h2>

<p-dropdown
    [options]="lang"
    placeholder="Select a Language"
    optionLabel="name"
    [showClear]="true"
    (onClick)="onClick()">
</p-dropdown>

• app.component.ts:

Javascript

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

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

export class AppComponent {
    lang = [
        { name: "HTML" },
        { name: "ReactJS" },
        { name: "Angular" },
        { name: "Bootstrap" },
        { name: "PrimeNG" }
    ];

    onClick() {
        alert("Hi Geek!! I am clicked");
    }
}

• 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 {}

Output:

Example 2: In this example, we will learn about Angular PrimeNG Form Dropdown Events Component onChange function

• app.component.html:

HTML

<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Angular PrimeNG Form Dropdown Events Component</h2>

<p-dropdown
    [options]="lang"
    placeholder="Select a Language"
    optionLabel="name"
    [showClear]="true"
    (onChange)="onChange()">
</p-dropdown>

• app.component.ts:

Javascript

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

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

export class AppComponent {
    lang = [
        { name: "HTML" },
        { name: "ReactJS" },
        { name: "Angular" },
        { name: "Bootstrap" },
        { name: "PrimeNG" }
    ];

    onChange() {
        alert("Hi Geek!! I am clicked");
    }
}

• 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 {}

Output:

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