Angular PrimeNG Slide Menu Animation Configuration

Last Updated : 26 Apr, 2025

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

Output:

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

Angular PrimeNG Slide Menu Properties

RajeevSarkar

Improve

Article Tags :

Angular PrimeNG Slide Menu Animation Configuration

Similar Reads

MenuModel API Component

Breadcrumb Component

ContextMenu Component

Dock Component

MegaMenu Component

Menu Component

Menubar Component

PanelMenu Component

SlideMenu Component

Steps Component