Angular PrimeNG Form MultiSelect Animation Configuration Component

Angular PrimeNG is a free and open-source framework with various components that Angular developers can use in their applications to enhance the user experience and speed up the development as they do not have to write everything from the ground up. In this article, we will see the Angular PrimeNG Form MultiSelect Animation Configuration Component.

The MultiSelect Component allows users to select multiple options from the set of provided options. The Multiselect Animation Configuration properties can be used to control the show and hide animation of the Multiselect panel. We can pass the animation configuration to the showTransitionOptions and hideTransitionOptions properties. 

Angular PrimeNG Form MultiSelect Animation Configuration Mode Properties:

• options: This property is used to pass an array of objects to display as Multiselect options.
• defaultLabel: This property accepts a string that is shown as a placeholder of the MultiSelect component.
• optionLabel: This property accepts a string that is the name of the property of the object that will be displayed as the label for the MultiSelect options.
• showTransitionOptions: This property is used to customize the show transition properties of the MultiSelect component.
• hideTransitionOptions: This property is used to customize the hide transition properties of the MultiSelect component.

Syntax:

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

Creating the Application and Installing the Required Modules:

Step 1: Create the Angular app using the following command.

ng new my_app

Step 2: After creating the app, move to the project folder using the command written below.

cd new_app

Step 3: Finally, Install the following modules in your project directory.

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

Project Structure: The project structure will as shown in the below picture:

Project Structure

Example 1: In this example, we set the showTransitionOptions property to “3s linear” so the Multiselect panel will open in 3 seconds linearly and will hide with its default pace.

• app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Animation Configuration Component
</h5>

<p-multiSelect class="custom-ms"
               [options]="cars"
               [(ngModel)]="selected"
               showTransitionOptions="3s linear"
               defaultLabel="Select Car(s)"
               optionLabel="name">
</p-multiSelect>

• app.component.ts

Javascript

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

interface Car {
    id: number;
    name: string;
}

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 400px !important;
        }
        `
    ]
})
export class AppComponent {

    cars: Car[] = [];
    selected: Car[] = [];

    ngOnInit() {
        this.cars = [
            {
                id: 1,
                name: "Vitara Brezza"
            },
            {
                id: 2,
                name: "Audi R8"
            },
            {
                id: 3,
                name: "Swift Dezire"
            },
            {
                id: 4,
                name: "Baleno"
            },
            {
                id: 5,
                name: "Ertiga"
            },
            {
                id: 6,
                name: "Seltos"
            },
        ];
    }
}

• 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 { MultiSelectModule }
    from "primeng/multiselect";

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

Output:

Example 2: This is one more example to illustrate the animation configuration of the Multiselect component. Here, we set the hideTransitionOptions properties to “2s linear” so the Multiselect panel will hide in 2s linearly.

• app.component.html

HTML

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

<h4>
    The Multiselect panel will
    Hide in 2 seconds linearly
</h4>

<p-multiSelect class="custom-ms"
               [options]="cars"
               [(ngModel)]="selected"
               hideTransitionOptions="2s linear"
               defaultLabel="Select Car(s)"
               optionLabel="name">
</p-multiSelect>

• app.component.ts

Javascript

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

interface Car {
    id: number;
    name: string;
}

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 300px !important;
        }
        `
    ]
})
export class AppComponent {

    cars: Car[] = [];
    selected: Car[] = [];

    ngOnInit() {
        this.cars = [
            {
                id: 1,
                name: "Vitara Brezza"
            },
            {
                id: 2,
                name: "Audi R8"
            },
            {
                id: 3,
                name: "Swift Dezire"
            },
            {
                id: 4,
                name: "Baleno"
            },
            {
                id: 5,
                name: "Ertiga"
            },
            {
                id: 6,
                name: "Seltos"
            },
        ];
    }
}

• 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 { MultiSelectModule }
    from "primeng/multiselect";

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

Output:

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