Simple sidenav is a simple, easily customizable, animated menu, with the possibility of infinite nesting that was built specifically for Angular apps.
Installation
Install Plugin via NPM
npm install simple-sidenav --save
|
npm install simple-sidenav –save
Module
# app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SimpleSidenavModule } from 'simple-sidenav';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SimpleSidenavModule,
BrowserAnimationsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
|
# app.module.ts
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { SimpleSidenavModule } from ‘simple-sidenav’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SimpleSidenavModule,
BrowserAnimationsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Component
# app.component.ts
import { Component } from '@angular/core';
import { SimpleMenu } from 'simple-sidenav';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
menu: SimpleMenu[] = [...];
animation: SimpleAnimation = {
in: { value: 'slide-in-stagger' },
out: { value: 'slide-out', duration: 200 }
};
onClick(item: {id: number|string, name: string, icon: string, index: number}) {
...
}
}
|
# app.component.ts
import { Component } from ‘@angular/core’;
import { SimpleMenu } from ‘simple-sidenav’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {
menu: SimpleMenu[] = […];
animation: SimpleAnimation = {
in: { value: ‘slide-in-stagger’ },
out: { value: ‘slide-out’, duration: 200 }
};
onClick(item: {id: number|string, name: string, icon: string, index: number}) {
…
}
}
HTML
# app.component.html
[menu]="menu"
[activeID]="'2'"
[animation]="animation"
[withArrow]="true"
(onSidenav)="onClick($event)">
>
|
# app.component.html
Menu Example
menu: SimpleMenu[] = [
{ "id": "1", "name": "Ruby on Rails", "icon": "assets/images/rails.png", "menu": [
{ "id": "1", "name": "Models", "menu": [
{ "id": "1", "name": "Active Record Basics" },
{ "id": "2", "name": "Active Record Migrations" },
{ "id": "3", "name": "Active Record Validations" },
{ "id": "4", "name": "Active Record Callbacks" },
{ "id": "5", "name": "Active Record Associations" },
{ "id": "6", "name": "Active Record Query Interface", "menu": [...] }
] },
] },
{ "id": "2", "name": "Angular", "icon": "assets/images/angular.png", "menu": [...] },
...
]
|
menu: SimpleMenu[] = [
{ “id”: “1”, “name”: “Ruby on Rails”, “icon”: “assets/images/rails.png”, “menu”: [
{ “id”: “1”, “name”: “Models”, “menu”: [
{ “id”: “1”, “name”: “Active Record Basics” },
{ “id”: “2”, “name”: “Active Record Migrations” },
{ “id”: “3”, “name”: “Active Record Validations” },
{ “id”: “4”, “name”: “Active Record Callbacks” },
{ “id”: “5”, “name”: “Active Record Associations” },
{ “id”: “6”, “name”: “Active Record Query Interface”, “menu”: […] }
] },
] },
{ “id”: “2”, “name”: “Angular”, “icon”: “assets/images/angular.png”, “menu”: […] },
…
]
List of properties you can use to customize the plugin
| Props |
Default value |
Interface |
Description |
Required |
[menu] |
none |
SimpleMenu[] |
See example above. |
true |
[animation] |
false |
SimpleAnimation |
Pass object with animation name. See example above. |
false |
(onSidenav) |
---- |
-------- |
Pass callback function to listen for sidenav clicks. $event contains an id and index of the clicked element. |
false |
[animate] |
false |
boolean |
Set to true if you want to animate the first appearance of the sidenav. |
false |
[withArrow] |
true |
boolean |
Set to false if you want to hide an arrow icon. |
false |
[activeID] |
none |
string |
Pass an ID of menu item if you want it to be opened by default. |
false |
See live demo and download source code.
This awesome plugin is developed by codica2. Visit their official github repository for more information and follow for future updates.
Related
