nest-menu
TypeScript icon, indicating that this package has built-in type declarations

0.0.7 • Public • Published

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

Run ng generate component component-name --project nest-menu to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project nest-menu.

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.

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i nest-menu

    Weekly Downloads

    1

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    111 kB

    Total Files

    20

    Last publish

    Collaborators

    • ihgazni2