NestMenu

used in angular project

This library was generated with Angular CLI version 10.0.11.

Install

npm install nest-menu

Usage

(stackblitz example)

Click to Demo Project

USEAGE SCREENSHOOTS

with plain dict data

   //data  a very big dict(only k:v, no array)
   public dict:any = {"@angular":{"common":{"http":{"testing":{}},"locales":{"extra":{},"global":{}},"upgrade":{},"bundles":{},"__ivy_ngcc__":{"fesm2015":{"http":{}}},"testing":{},"fesm2015":{"http":{}},"esm2015":{"http":{"src":{},"testing":{"src":{}}},"upgrade":{"src":{}},"src":{"location":{},"directives":{},"pipes":{},"i18n":{}},"testing":{"src":{}}}},"compiler-cli":{"src":{"diagnostics":{},"transformers":{},"metadata":{},"ngtsc":{"diagnostics":{"src":{}},"partial_evaluator":{"src":{}},"scope":{"src":{}},"entry_point":{"src":{}},"core":{"src":{},"api":{"src":{}}},"metadata":{"src":{}},"perf":{"src":{}},"annotations":{"src":{}},"imports":{"src":{}},"resource":{"src":{}},"util":{"src":{}},"switch":{"src":{}},"cycles":{"src":{}},"shims":{"src":{}},"reflection":{"src":{}},"modulewithproviders":{"src":{}},"incremental":{"src":{}},"translator":{"src":{}},"transform":{"src":{}},"file_system":{"src":{}},"typecheck":{"src":{},"api":{}},"routing":{"src":{}},"indexer":{"src":{}}}},"ngcc":{"src":{"execution":{"cluster":{},"tasks":{"queues":{}}},"host":{},"writing":{"cleaning":{}},"locking":{"lock_file_with_child_process":{}},"logging":{},"entry_point_finder":{},"migrations":{},"dependencies":{},"rendering":{},"analysis":{},"packages":{},"sourcemaps":{}}},"node_modules":{"locate-path":{},"p-locate":{},"find-up":{},"is-fullwidth-code-point":{},"yargs-parser":{"lib":{}},"strip-ansi":{},"path-exists":{},"ansi-styles":{},"cliui":{},"source-map":{"dist":{},"lib":{}},".bin":{},"string-width":{},"color-convert":{},"yargs":{"locales":{},"lib":{}},"ansi-regex":{},"color-name":{},"semver":{"bin":{}},"emoji-regex":{"es2015":{}},"wrap-ansi":{}}},"core":{"schematics":{"utils":{"typescript":{}},"migrations":{"undecorated-classes-with-decorated-fields":{},"module-with-providers":{},"static-queries":{"strategies":{"template_strategy":{},"test_strategy":{},"usage_strategy":{}},"angular":{}},"move-document":{},"undecorated-classes-with-di":{"decorator_rewrite":{}},"template-var-assignment":{"angular":{}},"dynamic-queries":{},"renderer-to-renderer2":{},"missing-injectable":{}}},"src":{},"bundles":{},"__ivy_ngcc__":{"fesm2015":{}},"testing":{},"fesm2015":{},"esm2015":{"src":{"view":{},"change_detection":{"differs":{}},"metadata":{},"sanitization":{},"compiler":{},"util":{},"render3":{"features":{},"instructions":{},"interfaces":{},"util":{},"jit":{},"styling":{},"i18n":{}},"debug":{},"zone":{},"di":{"jit":{},"interface":{}},"reflection":{},"render":{},"testability":{},"interface":{},"linker":{},"i18n":{}},"testing":{"src":{}}}},"cli":{"lib":{"cli":{},"config":{}},"tasks":{},"utilities":{},"node_modules":{"uuid":{"dist":{"esm-browser":{},"umd":{},"esm-node":{},"bin":{}}},".bin":{},"ansi-colors":{"types":{}}},"commands":{},"plugins":{},"bin":{"postinstall":{}},"models":{}},"router":{"upgrade":{},"bundles":{},"__ivy_ngcc__":{"fesm2015":{}},"testing":{},"fesm2015":{},"esm2015":{"upgrade":{"src":{}},"src":{"utils":{},"operators":{},"directives":{},"components":{}},"testing":{"src":{}}}},"platform-browser":{"animations":{},"bundles":{},"__ivy_ngcc__":{"fesm2015":{}},"testing":{},"fesm2015":{},"esm2015":{"src":{"browser":{"tools":{}},"security":{},"dom":{"events":{},"debug":{}}},"animations":{"src":{}},"testing":{"src":{}}}},"material":{"tooltip":{"testing":{}},"datepicker":{},"stepper":{},"sort":{"testing":{}},"grid-list":{"testing":{}},"prebuilt-themes":{},"sidenav":{"testing":{}},"core":{"error":{},"typography":{},"line":{},"animation":{},"label":{},"style":{},"testing":{},"ripple":{},"focus-indicators":{},"selection":{"pseudo-checkbox":{}},"color":{},"datetime":{},"option":{},"density":{},"theming":{},"common-behaviors":{}},"schematics":{"ng-add":{"fonts":{},"theming":{}},"ng-generate":{"dashboard":{"files":{"__path__":{"__name@dasherize@if-flat__":{}}}},"address-form":{"files":{"__path__":{"__name@dasherize@if-flat__":{}}}},"navigation":{"files":{"__path__":{"__name@dasherize@if-flat__":{}}}},"tree":{"files":{"__path__":{"__name@dasherize@if-flat__":{}}}},"table":{"files":{"__path__":{"__name@dasherize@if-flat__":{}}}}},"ng-update":{"migrations":{"misc-ripples-v7":{},"misc-checks":{},"package-imports-v8":{},"hammer-gestures-v9":{}},"typescript":{},"data":{}}},"slide-toggle":{"testing":{}},"bottom-sheet":{"testing":{}},"card":{"testing":{}},"icon":{"testing":{}},"progress-bar":{"testing":{}},"bundles":{},"radio":{"testing":{}},"form-field":{"testing":{"control":{}}},"button-toggle":{"testing":{}},"tabs":{"testing":{},"tab-nav-bar":{}},"checkbox":{"testing":{}},"__ivy_ngcc__":{"fesm2015":{"icon":{}}},"input":{"testing":{}},"tree":{"data-source":{}},"table":{"testing":{}},"select":{"testing":{}},"progress-spinner":{"testing":{}},"expansion":{"testing":{}},"fesm2015":{"tooltip":{},"sort":{},"grid-list":{},"sidenav":{},"core":{},"slide-toggle":{},"bottom-sheet":{},"card":{},"icon":{},"progress-bar":{},"radio":{},"form-field":{"testing":{}},"button-toggle":{},"tabs":{},"checkbox":{},"input":{},"table":{},"select":{},"progress-spinner":{},"expansion":{},"toolbar":{},"autocomplete":{},"snack-bar":{},"divider":{},"button":{},"paginator":{},"badge":{},"dialog":{},"list":{},"menu":{},"slider":{}},"toolbar":{"testing":{}},"chips":{},"autocomplete":{"testing":{}},"snack-bar":{"testing":{}},"divider":{"testing":{}},"button":{"testing":{}},"paginator":{"testing":{}},"badge":{"testing":{}},"dialog":{"testing":{}},"list":{"testing":{}},"menu":{"testing":{}},"esm2015":{"tooltip":{"testing":{}},"datepicker":{},"stepper":{},"sort":{"testing":{}},"grid-list":{"testing":{}},"sidenav":{"testing":{}},"core":{"error":{},"line":{},"animation":{},"label":{},"testing":{},"ripple":{},"selection":{"pseudo-checkbox":{}},"datetime":{},"option":{},"common-behaviors":{}},"slide-toggle":{"testing":{}},"bottom-sheet":{"testing":{}},"card":{"testing":{}},"icon":{"testing":{}},"progress-bar":{"testing":{}},"radio":{"testing":{}},"form-field":{"testing":{"control":{}}},"button-toggle":{"testing":{}},"tabs":{"testing":{},"tab-nav-bar":{}},"checkbox":{"testing":{}},"input":{"testing":{}},"tree":{"data-source":{}},"table":{"testing":{}},"select":{"testing":{}},"progress-spinner":{"testing":{}},"expansion":{"testing":{}},"toolbar":{"testing":{}},"chips":{},"autocomplete":{"testing":{}},"snack-bar":{"testing":{}},"divider":{"testing":{}},"button":{"testing":{}},"paginator":{"testing":{}},"badge":{"testing":{}},"dialog":{"testing":{}},"list":{"testing":{}},"menu":{"testing":{}},"slider":{"testing":{}}},"slider":{"testing":{}}},"compiler":{"src":{"css_parser":{},"template_parser":{},"aot":{},"view_compiler":{},"render3":{"view":{"i18n":{}}},"jit":{},"output":{},"ml_parser":{},"expression_parser":{},"schema":{},"compiler_util":{},"i18n":{"serializers":{}}},"bundles":{},"__ivy_ngcc__":{"fesm2015":{}},"testing":{"src":{"output":{}}},"fesm2015":{},"esm2015":{"src":{"css_parser":{},"template_parser":{},"aot":{},"view_compiler":{},"render3":{"view":{"i18n":{}}},"jit":{},"output":{},"ml_parser":{},"expression_parser":{},"schema":{},"compiler_util":{},"i18n":{"serializers":{}}},"testing":{"src":{"output":{}}}}},"animations":{"bundles":{},"__ivy_ngcc__":{"fesm2015":{"browser":{}}},"browser":{"testing":{}},"fesm2015":{"browser":{}},"esm2015":{"src":{"players":{}},"browser":{"src":{"render":{"css_keyframes":{},"web_animations":{}},"dsl":{"style_normalization":{}}},"testing":{"src":{}}}}},"flex-layout":{"core":{"typings":{"style-utils":{},"base":{},"media-observer":{},"stylesheet-map":{},"utils":{},"tokens":{},"style-builder":{},"basis-validator":{},"breakpoints":{"data":{}},"match-media":{"mock":{}},"media-marshaller":{},"media-trigger":{}}},"esm5":{},"server":{"typings":{}},"typings":{"core":{"style-utils":{},"base":{},"media-observer":{},"stylesheet-map":{},"utils":{},"tokens":{},"style-builder":{},"basis-validator":{},"breakpoints":{"data":{}},"match-media":{"mock":{}},"media-marshaller":{},"media-trigger":{}},"utils":{},"esm5":{"core":{"style-utils":{},"base":{},"media-observer":{},"stylesheet-map":{},"utils":{},"tokens":{},"style-builder":{},"basis-validator":{},"breakpoints":{"data":{}},"match-media":{"mock":{}},"media-marshaller":{},"media-trigger":{}},"utils":{},"server":{},"flex":{"flex-align":{},"layout":{},"flex-fill":{},"flex":{},"flex-order":{},"flex-offset":{},"layout-align":{},"layout-gap":{}},"extended":{"style":{},"show-hide":{},"img-src":{},"class":{}},"grid":{"auto":{},"grid-align":{},"align-rows":{},"row":{},"rows":{},"columns":{},"areas":{},"gap":{},"column":{},"align-columns":{},"area":{}}},"server":{},"flex":{"flex-align":{},"layout":{},"flex-fill":{},"flex":{},"flex-order":{},"flex-offset":{},"layout-align":{},"layout-gap":{}},"extended":{"style":{},"show-hide":{},"img-src":{},"class":{}},"grid":{"auto":{},"grid-align":{},"align-rows":{},"row":{},"rows":{},"columns":{},"areas":{},"gap":{},"column":{},"align-columns":{},"area":{}}},"bundles":{},"flex":{"typings":{"flex-align":{},"layout":{},"flex-fill":{},"flex":{},"flex-order":{},"flex-offset":{},"layout-align":{},"layout-gap":{}}},"__ivy_ngcc__":{"esm2015":{}},"extended":{"typings":{"style":{},"show-hide":{},"img-src":{},"class":{}}},"grid":{"typings":{"auto":{},"grid-align":{},"align-rows":{},"row":{},"rows":{},"columns":{},"areas":{},"gap":{},"column":{},"align-columns":{},"area":{}}},"esm2015":{}},"cdk":{"stepper":{},"layout":{},"observers":{},"schematics":{"update-tool":{"utils":{}},"utils":{"vendored-ast-utils":{},"ast":{}},"ng-add":{},"ng-generate":{"drag-drop":{"files":{"__path__":{"__name@dasherize@if-flat__":{}}}}},"ng-update":{"migrations":{},"typescript":{},"data":{},"html-parsing":{}}},"scrolling":{},"portal":{},"drag-drop":{"directives":{}},"overlay":{"dispatchers":{},"position":{},"scroll":{}},"bundles":{},"collections":{},"__ivy_ngcc__":{"fesm2015":{}},"node_modules":{"parse5":{"lib":{"common":{},"extensions":{"position-tracking":{},"location-info":{},"error-reporting":{}},"parser":{},"utils":{},"serializer":{},"tokenizer":{},"tree-adapters":{}}}},"testing":{"protractor":{},"testbed":{"fake-events":{}}},"a11y":{"high-contrast-mode":{},"aria-describer":{},"key-manager":{},"focus-trap":{},"live-announcer":{},"focus-monitor":{},"interactivity-checker":{}},"tree":{"control":{}},"table":{},"fesm2015":{"testing":{}},"platform":{"features":{}},"bidi":{},"keycodes":{},"text-field":{},"coercion":{},"accordion":{},"clipboard":{},"esm2015":{"stepper":{},"layout":{},"observers":{},"scrolling":{},"portal":{},"drag-drop":{"directives":{}},"overlay":{"dispatchers":{},"position":{},"scroll":{}},"collections":{},"testing":{"protractor":{},"testbed":{"fake-events":{}}},"a11y":{"high-contrast-mode":{},"aria-describer":{},"key-manager":{},"focus-trap":{},"live-announcer":{},"focus-monitor":{},"interactivity-checker":{}},"tree":{"control":{}},"table":{},"platform":{"features":{}},"bidi":{},"keycodes":{},"text-field":{},"coercion":{},"accordion":{},"clipboard":{}}},"forms":{"bundles":{},"__ivy_ngcc__":{"fesm2015":{}},"fesm2015":{},"esm2015":{"src":{"directives":{"reactive_directives":{}}}}},"platform-browser-dynamic":{"bundles":{},"__ivy_ngcc__":{"fesm2015":{}},"testing":{},"fesm2015":{},"esm2015":{"src":{"resource_loader":{}},"testing":{"src":{}}}}}}

   //
    <div
        fxLayout="row"
        fxLayoutAlign="start center"
    >
        <button mat-button color="primary" [disabled]="true">nest data with plain dict</button>
        <nv-nest-menu [data]="dict"></nv-nest-menu>
    </div>

with nest dict data

   //data   nest-dict(each element with a children:[])
   public nest:any = {"disp_name":"DevFestFL","icon_name":"","children":[{"disp_name":"Speakers","icon_name":"group","children":[{"disp_name":"Michael Prentice","icon_name":"person","route":"michael-prentice","children":[{"disp_name":"Create Enterprise UIs","icon_name":"star_rate","route":"material-design"}]},{"disp_name":"Stephen Fluin","icon_name":"person","route":"stephen-fluin","children":[{"disp_name":"What's up with the Web?","icon_name":"star_rate","route":"what-up-web"}]},{"disp_name":"Mike Brocchi","icon_name":"person","route":"mike-brocchi","children":[{"disp_name":"My ally, the CLI","icon_name":"star_rate","route":"my-ally-cli"},{"disp_name":"Become an Angular Tailor","icon_name":"star_rate","route":"become-angular-tailer"}]}]},{"disp_name":"Sessions","icon_name":"speaker_notes","children":[{"disp_name":"Create Enterprise UIs","icon_name":"star_rate","route":"material-design"},{"disp_name":"What's up with the Web?","icon_name":"star_rate","route":"what-up-web"},{"disp_name":"My ally, the CLI","icon_name":"star_rate","route":"my-ally-cli"},{"disp_name":"Become an Angular Tailor","icon_name":"star_rate","route":"become-angular-tailer"}]},{"disp_name":"Feedback","icon_name":"feedback","route":"feedback"}]}

   //
    <div
        fxLayout="row"
        fxLayoutAlign="start center"
    >
        <button mat-button color="primary" [disabled]="true">nest data with .children</button>
        <nv-nest-menu [data]="nest"></nv-nest-menu>
    </div>

with default icon (same as key)

   //data   a dict(only k:v, no array)
   public icon:any = = {
        alarm:{
            group:{
                person:{
                    star_rate:{
                    }
                }
            },
            speaker_notes:{
                star_rate:{
                },
            },
            feedback:{
            }
      }
   }
   //
    <div
        fxLayout="row"
        fxLayoutAlign="start center"
    >
        <button mat-button color="primary" [disabled]="true">with default-icon same as display-name</button>
        <nv-nest-menu [data]="icon" [enable_auto_icon]="true"></nv-nest-menu>
    </div>

without default icon

   //data   a dict(only k:v, no array)
   public icon:any = = {
        alarm:{
            group:{
                person:{
                    star_rate:{
                    }
                }
            },
            speaker_notes:{
                star_rate:{
                },
            },
            feedback:{
            }
      }
   }
   //
    <div
        fxLayout="row"
        fxLayoutAlign="start center"
    >
        <button mat-button color="primary" [disabled]="true">with default-icon same as display-name</button>
        <nv-nest-menu [data]="icon" [enable_auto_icon]="false"></nv-nest-menu>
    </div>

use a special object created by ndtreejs

//data 
import {
    ndcls
} from "ndtreejs"
public tree:any = ndcls.load_from_nest_dict(nest_data,"children")
//
<div
    fxLayout="row"
    fxLayoutAlign="start center"
>
    <button mat-button color="primary" [disabled]="true">object data(internal-using ndtreejs)</button>
    <nv-nest-menu [data]="tree"></nv-nest-menu>
</div>

refer to nvtree(ndtreejs) for this data type

GITHUB

nv-angular-nest-menu

PACKAGE DEPENDANY

ndtreejs nvjson

CODE REFERENCE

(thanks to)

https://stackblitz.com/@Splaktar

Code scaffolding

Note: Don't forget to add --project nest-menu or else it will be added to the default project in your angular.json file.

Build

Run ng build nest-menu to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build nest-menu, go to the dist folder cd dist/nest-menu and run npm publish.

Running unit tests

Run ng test nest-menu to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

nest-menu

NestMenu

Install

Usage

USEAGE SCREENSHOOTS

with plain dict data

with nest dict data

with default icon (same as key)

without default icon

use a special object created by ndtreejs

GITHUB

PACKAGE DEPENDANY

CODE REFERENCE

Code scaffolding

Build

Publishing

Running unit tests

Further help

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

nest-menu

NestMenu

Install

Usage

USEAGE SCREENSHOOTS

with plain dict data

with nest dict data

with default icon (same as key)

without default icon

use a special object created by ndtreejs

GITHUB

PACKAGE DEPENDANY

CODE REFERENCE

Code scaffolding

Build

Publishing

Running unit tests

Further help

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads