Animation in EJ 1 Angular NavigationDrawer (Navigation Drawer)

8 Jun 2017 / 2 minutes to read

You can set the transition type of the Navigation Drawer by using type property. The possible transition types are slide and overlay.

• Slide - Both navigation panel and content page slides towards left/right direction to view the navigation panel items.
• Overlay - Only the navigation panel slides over the content page to view the navigation panel items. That is, part of the content page is hidden under navigation panel.

NOTE

_ Transition slide type works only with fixed position._

The default value is Overlay.

In the HTML page set the type and position of Navigationdrawer.

html

<div ej-navigationdrawer id="navpane" targetId="drawerTarget" type="slide" direction="left" [enableListView]="enablelistview" position="fixed" [listViewSettings]="listviewsettings">
        <ul>
            <li>Settings</li>
            <li>Read</li>
            <li>Help</li>
            <li>About</li>
        </ul>
    
    </div>
    <div>
        <input type="button" ej-button id="drawerTarget" text="Open Drawer" style="top:200px;left:400px;position:absolute" />
    </div>

ts

export class AppComponent {
        enablelistview: any;
        listviewsettings: any;
        constructor() {
            this.enablelistview = true;
            this.listviewsettings = { height: 500 };
        }
    }

The following screenshot illustrates the output.

Before target click

After target click