ngx-dynamic-nav
v1.0.3
Published
Dynamic nav
Downloads
2
Maintainers
Readme
README
This README would normally document whatever steps are necessary to get your application up and running.
What is ngx-Dynamic-nav ?
It is a dynamic/recursive nav, it helps you in displaying a navigation in a vertical way for example if you need to create a nav with the following schema.
Home
=> customers
=> active
=> since 1990
...
=> since 1988
...
=> blocked
=> contracts
=> open
=> closed
All you need is to put elements in an array of json objects. You can keep the default css, or you can put your custom css.
Setup
1- In your root application folder run:
npm i ngx-dynamic-nav
2- Once ngx-dynamic-nav is installed, you need to import the main module NgxDynamicNavModule :
import {NgxDynamicNavModule} from 'ngx-dynamic-nav';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
@NgModule({
...
imports: [NgxDynamicNavModule, FontAwesomeModule ...],
...
})
export class YourAppModule {
}
In angular.json update your styles.
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
3- Then use it in the specific page:
Assuming you want to create a nav then all you need is to follow these steps: We are using fontawesome to display icon on each item. In your xxx.component.ts create your own nav array like this:
import {Component} from '@angular/core';
import {MenuItemConfig} from '@ngx-dynamic-nav/models/MenuItemConfig';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'navTest';
config = 'dark';
borderBottom = '1px solid #9a0245';
ngNavConfig: MenuItemConfig[] = [
{
leftIcon: 'home',
itemText: 'Home',
openedItem: false,
itemClass: 'nav-item mx-0 mx-lg-1',
itemId: 'Home',
itemPath: '/home',
hidden: false,
backgroundColor: '',
borderBottom: this.borderBottom
},
{
leftIcon: 'tasks',
itemText: 'Operation',
openedItem: false,
itemClass: 'nav-item mx-0 mx-lg-1',
itemId: 'Operation',
itemPath: '/operations',
hidden: false,
backgroundColor: '',
borderBottom: this.borderBottom,
children: [
{
leftIcon: 'coffee',
itemText: 'J 98741',
itemClass: 'nav-item mx-0 mx-lg-1 second-level',
itemPath: '/',
itemId: 'J_1*98',
backgroundColor: '#1a293a',
borderBottom: this.borderBottom,
borderTop: this.borderBottom,
children: [
{
leftIcon: 'coffee',
itemText: 'J zd1',
itemClass: 'nav-item mx-0 mx-lg-1 second-level',
itemPath: '/',
itemId: 'J_187',
backgroundColor: '#1a293a',
paddingLeft: '50px',
borderBottom: this.borderBottom,
borderTop: this.borderBottom,
},
{
leftIcon: 'coffee',
itemText: 'J 87z2',
itemClass: 'nav-item mx-0 mx-lg-1 second-level',
itemPath: '/',
backgroundColor: '#1a293a',
itemId: 'J_azez2',
paddingLeft: '50px',
borderBottom: this.borderBottom
}
]
},
{
leftIcon: 'coffee',
itemText: 'J 2632',
itemClass: 'nav-item mx-0 mx-lg-1 second-level',
itemPath: '/',
backgroundColor: '#1a293a',
itemId: 'J_23256',
borderBottom: this.borderBottom,
children: [
{
leftIcon: 'coffee',
itemText: 'J zer1',
itemClass: 'nav-item mx-0 mx-lg-1 second-level',
itemPath: '/',
itemId: 'J_1azera',
backgroundColor: '#1a293a',
borderBottom: this.borderBottom,
borderTop: this.borderBottom,
},
{
leftIcon: 'coffee',
itemText: 'J é"h2',
itemClass: 'nav-item mx-0 mx-lg-1 second-level',
itemPath: '/',
backgroundColor: '#1a293a',
itemId: 'J_2dfg',
borderBottom: this.borderBottom
}
]
}
]
}
]
}
in xxx.component.html: try something like this:
<div class="container-fluid h-100 body-content">
<div class="content">
<div class="row">
<div class="col-lg-3">
<!-- set menuItemConfig here as input in app-ngx-nav!-->
<ngx-dynamic-nav [menuItems]="ngNavConfig" [config]="config"></ngx-dynamic-nav>
</div>
<div class="col-lg-9"></div>
</div>
</div>
</div>
that's all!
Hope it can Help you :)
Dependencies
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@ng-bootstrap/ng-bootstrap": "^8.0.0",
"ngx-bootstrap": "^6.2.0",
"bootstrap": "^4.5.3",
Donation
Did this project help you to reduce time? I won't say no to a cup of coffee 🍵 :)