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.
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 >
|
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' ,
},
],
},
];
}
}
|
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.
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 >
|
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
Share your thoughts in the comments
Please Login to comment...