# ngx-dynamic-nav
> Dynamic nav
Latest version **1.0.3** (published 2021-04-25) · MIT License license · 0 weekly downloads
## Install
```sh
npm install ngx-dynamic-nav
pnpm add ngx-dynamic-nav
yarn add ngx-dynamic-nav
bun add ngx-dynamic-nav
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-04-25 |
| First published | 2021-04-24 |
| Weekly downloads | 0 |
| License | MIT License |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | GARRAOUI Marwen |
| Maintainers | marwen.afif.garraoui |
| Keywords | Dynamic Navigation, Recursive Navigation, nav, ngx-dynamic-nav, angular nav, menu, Dynamic-nav, vertical-nav, directive, recursive-nav |
## Links
- npm: https://www.npmjs.com/package/ngx-dynamic-nav
- Repository: https://github.com/GarraouiMarwen/ngx-dynamic-nav
- Homepage: https://github.com/GarraouiMarwen/ngx-dynamic-nav#readme
- Issues: https://github.com/GarraouiMarwen/ngx-dynamic-nav/issues
- npm.io page: https://npm.io/package/ngx-dynamic-nav
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
## Alternatives
- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads
## Recent versions
- 1.0.3 (latest) — 2021-04-25
- 1.0.1 — 2021-04-25
- 1.0.0-rc.3 — 2021-04-24
## 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:
````
````
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 🍵 :)
---
_Source: https://npm.io/package/ngx-dynamic-nav · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._