Angular PrimeNG Form Dropdown Animation Configuration Component

Angular PrimeNG is an open-source UI component library for Angular Applications. Using the components provided by Angular PrimeNG, one can create stunning and responsive angular applications. In this article, we will see the Angular PrimeNG Form Dropdown Animation Configuration Component.

The Form Dropdown component gives the user a list of options where any one option can be selected. The open and hide animation of the dropdown overlay can be customized using the showTransitionOptions and hideTransitionOptions properties. 

Angular PrimeNG Form Dropdown Animation Configuration Properties:

• showTransitionOptions: This property is used to specify the show transition properties of the dropdown overlay. It accepts string values and its default value is “.12s cubic-bezier(0, 0, 0.2, 1)”.
• hideTransitionOptions: This property is used to specify the hide transition properties of the dropdown overlay. It accepts string values and its default value is “.1s linear”.
• options: This property is used to pass an array of objects to show as the dropdown options.
• optionLabel: This specifies a property of the options objects to display the dropdown option labels.

Syntax:

<p-dropdown 
    [(ngModel)]="..."
    [hideTransitionOptions]="'...'"
    [showTransitionOptions]="'...'"
    [options]="..."
    optionLabel="...">
</p-dropdown>

Creating Angular application and Installing the Modules:

Step 1: Create an Angular application using the following command.

ng new myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command.

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps, the structure will look like the following:

Project Structure

Example 1: In this example, we set the showTransitionOptions property of the dropdown component to “2s linear” so the popup will take 2 seconds to open and it will animate linearly.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form Dropdown
    Animation Configuration Component
</h3>

<p-dropdown [options]="cars"
            optionLabel="car"
            placeholder="Select a Car"
            [(ngModel)]="preferredCar"
            [showTransitionOptions]="'2s linear'">
</p-dropdown>

• app.component.ts:

Javascript

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

interface Car {
    car: String;
    val: String;
}
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    cars: Car[] = [];
    preferredCar!: Car;

    ngOnInit() {
        this.cars = [
            {
                car: "Tata Safari",
                val: "TATASAF"
            },
            {
                car: "Innova Crysta",
                val: "INVACRS"
            },
            {
                car: "Jeep Compass",
                val: "JEEPCMP"
            },
            {
                car: "Tata Nexon",
                val: "TATANXN"
            },
            {
                car: "Isuzu D-Max",
                val: "ISZUDMX"
            },
            {
                car: "Honda City",
                val: "HNDACTY"
            },
            {
                car: "Hyundai Creta",
                val: "HNDICTA"
            },
        ];
    }
}

• app.module.ts:

HTML

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
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,
        FormsModule,
        DropdownModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In this example, we set the hideTransitionOptions property of the dropdown component to “1s” and the showTransitionOptions property to “2s” so the color picker popup will take 1 second to close and 2 seconds to open.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form Dropdown
    Animation Configuration Component
</h3>

<p-dropdown [options]="cars"
            optionLabel="car"
            placeholder="Select a Car"
            [(ngModel)]="preferredCar"
            [hideTransitionOptions]="'1s'"
            [showTransitionOptions]="'2s'">
</p-dropdown>

• app.component.ts:

Javascript

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

interface Car {
    car: String;
    val: String;
}
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    cars: Car[] = [];
    preferredCar!: Car;

    ngOnInit() {
        this.cars = [
            {
                car: "Tata Safari",
                val: "TATASAF"
            },
            {
                car: "Innova Crysta",
                val: "INVACRS"
            },
            {
                car: "Jeep Compass",
                val: "JEEPCMP"
            },
            {
                car: "Tata Nexon",
                val: "TATANXN"
            },
            {
                car: "Isuzu D-Max",
                val: "ISZUDMX"
            },
            {
                car: "Honda City",
                val: "HNDACTY"
            },
            {
                car: "Hyundai Creta",
                val: "HNDICTA"
            },
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
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,
        FormsModule,
        DropdownModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

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