Sidebar Directive

Sidebar

NgAceSidebar is a wrapper for Ace's sidebar functionality such as collapse/expand and hide/show in mobile.

<div class="sidebar" NgAceSidebar #sidebar='NgAceSidebar'>
 ...
</div>

<!-- or with options -->

<div class="sidebar" [NgAceSidebar]='{"swipe": true}' #sidebar='NgAceSidebar'>
 ...
</div>

Inputs

collapsed

hidden

<div class="sidebar" NgAceSidebar #sidebar='NgAceSidebar' [collapsed]="isCollapsed">
 ...
</div>

Outputs

collapsedChange

Emitted before sidebar is collapsed/expanded

onCollapsed

Emitted after sidebar is collapsed

onExpanded

Emitted after sidebar is expanded

hiddenChange

Emitted before sidebar is hidden/shown (mobile)

onHidden

Emitted after sidebar is hidden in mobile

onShown

Emitted after sidebar is shown in mobile

<div class="sidebar" NgAceSidebar #sidebar='NgAceSidebar' (onCollapsed)="doSomething()">
 ...
</div>

Or inside a parent component:

@ViewChild('sidebar', {static: true}) sidebar: NgAceSidebar;

SomeMethod() {
    this.sidebar.collapsedChange.subscribe((isCollapsed: boolean) => {
        // do something
    })
}

Options

NgAceSidebar

Similar to Ace sidebar options:

<div class="sidebar" [NgAceSidebar]='{"swipe": true}' #sidebar='NgAceSidebar'>
 ...
</div>

autoOpen

Default is true. Passed to child NgAceSubmenu elements. Automatically open 'active' submenu on page load.

autoRestore

Default is true. Restore sidebar's open submenu and scroll position when navigating between layouts (for example navigating between login and main)

autoHide

Default is true. Hide the sidebar in mobile view when a new router link is clicked

Methods

toggle

Toggle sidebar

collapse

Collapse sidebar

expand

Expand sidebar

toggleMobile

Toggle sidebar in mobile view (i.e. hide or show)

show

Show sidebar in mobile view

hide

Hide sidebar in mobile view

<div class="sidebar" NgAceSidebar #sidebar='NgAceSidebar'>
 ...
</div>

<button (click)="sidebar.toggle()">Toggle</button>

Or inside a parent component:

@ViewChild('sidebar', {static: true}) sidebar: NgAceSidebar;

SomeMethod() {
    this.sidebar.toggle()
}

Submenu

Optional NgAceSubmenu directive adds some functionality to submenu.

In Ace's demo it's applied both to sidebar's main .nav (top level navigation) and .submenu-inner items.

For an example of how to use this, you can see sidebar.component.html and submenu.component.html inside ng-ace-demo/src/app/layouts/partials/sidebar folder.

Options

items

Optional. The submenu items passed to it. Used to restore the open submenu.

closeOthers

Default is true. When a submenu is opened, close the other open one.

autoOpen

Open the active elements (submenus) by default. If not specified it's inherited from the parent NgAceSidebar directive's autoOpen value

Methods

toggle (navItem: any, navItemSub?: NgAceSubmenu)

In app-sidebar-submenu component (ng-ace-demo/src/app/layouts/partials/sidebar/submenu.component.ts) when a submenu router link is clicked to toggle submenu, this function gets called.
It will update the new navItem and hides(closes) the previously opened navItem and if navItemSub (NgAceSubmenu) is provided, it will be scrolled into view if some parts of it are outside of view.

Events

onToggleItem

Emitted when an item (submenu) is toggled

<app-sidebar-submenu NgAceSubmenu (onToggleItem)="onToggleItem($event)" class="nav has-active-border" [items]="sidebarItems"></app-sidebar-submenu>

onToggleItem($event: any) {
  let navItem = $event;
}