Change animation settings in Angular Menu component

28 Sep 20235 minutes to read

To change the animation of the Menu, animationSettings property is used. The supported effects for Menu are,

Effect	Functionality
None	Specifies the sub menu transform with no animation effect.
SlideDown	Specifies the sub menu transform with slide down effect.
ZoomIn	Specifies the sub menu transform with zoom in effect.
FadeIn	Specifies the sub menu transform with fade in effect.

The following sample illustrates how to open Menu with FadeIn effect with the duration of 800ms. Also we can set easing for menu items.

app.component.ts

import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel, MenuAnimationSettingsModel } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Menu. -->
            <ejs-menu [items]='menuItems' [animationSettings]='animationSettings'></ejs-menu></div>`
})

export class AppComponent {

    public animationSettings: MenuAnimationSettingsModel = {
        effect: 'FadeIn',
        duration: 800
    }

    public menuItems: MenuItemModel[] = [
        {
            text: 'File',
            items: [
                { text: 'Open' },
                { text: 'Save' },
                { text: 'Exit' }
            ]
        },
        {
            text: 'Edit',
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        },
        {
            text: 'View',
            items: [
                { text: 'Toolbar' },
                { text: 'Sidebar' }
            ]
        },
        {
            text: 'Tools',
            items: [
                { text: 'Spelling & Grammar' },
                { text: 'Customize' },
                { text: 'Options' }
            ]
        },
        { text: 'Go' },
        { text: 'Help' }
    ];
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MenuModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

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

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);