Angular PrimeNG Slide Menu Animation Configuration

Last Updated : 21 Dec, 2022

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Slide Menu Animation Configuration.

The SlideMenu component allows the creation of the menu in the form of a sliding menu. It displays submenus by sliding animation. The Slide Menu Animation Configuration allows us to configure the default animation of opening and closing the menu.

Slide Menu Animation Configuration Properties:

showTransitionOptions: Here we put the animation that is displayed when we open a menu. The default value is .12s cubic-bezier(0, 0, 0.2, 1).
hideTransitionOptions: Here we put the animation that is displayed when we close a menu. The default value is .1s linear.

Syntax:

<p-slideMenu [showTransitionOptions]="'20ms ease-out'" 
             [hideTransitionOptions]="'0ms'" #menu 
             [model]="items" [popup]="true">
</p-slideMenu>

Creating Angular application & Module Installation:

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

ng new geeks_angular

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

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

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

Project Structure: The project structure will look like the following:

Example 1: This example describes the basic usage of the SlideMenu Animation Configuration in Angular PrimeNG.

app.component.html

HTML

<h1 style="color: green; 
           text-align:center;"> 
    GeeksforGeeks 
</h1> 
<h3> 
    Angular PrimeNG Slide Menu 
    Animation Configuration 
</h3> 
<p-slideMenu [showTransitionOptions]="'1s ease-in-out'"  
             [hideTransitionOptions]="'0.5s linear'"  
             #menu [model]="items"  
             [popup]="true"> 
</p-slideMenu> 
<button #btn type="button" pButton  
        icon="pi pi-list" 
        label="Show" 
        (click)="menu.toggle($event)"> 
</button>

app.component.ts

Javascript

import { Component, OnInit, ViewEncapsulation }  
    from '@angular/core'; 
import { MenuItem } from 'primeng/api'; 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
}) 
export class AppComponent { 
    items: MenuItem[]; 
  
    ngOnInit() { 
        this.items = [ 
            { 
                label: 'Data Structures', 
                items: [ 
                    { 
                        label: 'Linked List', 
                        items: [ 
                            { 
                                label: 'Singly Linked List', 
                            }, 
                            { 
                                label: 'Doubly Linked List', 
                            }, 
                        ], 
                    }, 
                    { 
                        label: 'Trie', 
                    }, 
                    { 
                        label: 'Array', 
                    }, 
                ], 
            }, 
            { 
                label: 'Algorithms', 
                items: [ 
                    { 
                        label: 'Sorting', 
                    }, 
                    { 
                        label: 'Searching', 
                    }, 
                ], 
            }, 
            { 
                label: 'Development', 
  
                items: [ 
                    { 
                        label: 'Android', 
                    }, 
                    { 
                        label: 'Web development', 
                    }, 
                ], 
            }, 
        ]; 
    } 
}

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 { SlideMenuModule } from 'primeng/slidemenu'; 
import { ButtonModule } from 'primeng/button'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        SlideMenuModule, 
        ButtonModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
  
export class AppModule { }

Output:

Example 2: This example illustrates the use of the Slide Menu Animation Configuration by disabling the animations.

app.component.html

HTML

<h1 style="color: green; 
           text-align:center;"> 
    GeeksforGeeks 
</h1> 
<h3> 
    Angular PrimeNG Slide Menu  
    Animation Configuration 
</h3> 
<p-slideMenu [showTransitionOptions]="'0.0'"  
             [hideTransitionOptions]="'0.0'"  
             #menu [model]="items"  
             [popup]="true"> 
</p-slideMenu> 
<button #btn type="button" pButton  
        icon="pi pi-list" 
        label="Show" 
        (click)="menu.toggle($event)"> 
</button>

app.component.ts

Javascript

import { Component, OnInit, ViewEncapsulation }  
    from '@angular/core'; 
import { MenuItem } from 'primeng/api'; 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
}) 
export class AppComponent { 
    items: MenuItem[]; 
  
    ngOnInit() { 
        this.items = [ 
            { 
                label: 'Data Structures', 
                items: [ 
                    { 
                        label: 'Linked List', 
                        items: [ 
                            { 
                                label: 'Singly Linked List', 
                            }, 
                            { 
                                label: 'Doubly Linked List', 
                            }, 
                        ], 
                    }, 
                    { 
                        label: 'Trie', 
                    }, 
                    { 
                        label: 'Array', 
                    }, 
                ], 
            }, 
            { 
                label: 'Algorithms', 
                items: [ 
                    { 
                        label: 'Sorting', 
                    }, 
                    { 
                        label: 'Searching', 
                    }, 
                ], 
            }, 
            { 
                label: 'Development', 
  
                items: [ 
                    { 
                        label: 'Android', 
                    }, 
                    { 
                        label: 'Web development', 
                    }, 
                ], 
            }, 
        ]; 
    } 
}

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 { SlideMenuModule } from 'primeng/slidemenu'; 
import { ButtonModule } from 'primeng/button'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        SlideMenuModule, 
        ButtonModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
  
export class AppModule { }