ng2-limber
ng2-limber is an Angular 2 (final release) module that simplifies the grunt work of creating navigation links. Each nav menu is stored in a json file as an array of ILimberLink and pulled at runtime to create menus using ng2-limber's LimberLinkGroupComponent.
installation
- import your favorite bootstrap css file
- npm i --save ng2-limber
Usage
Store navs in a json file that will be accessed via http:
let 'some.domain/app/core/nav/navbar-right-links.json' point to the file below:
what the above properties do:
- "text" - the text to be displayed
- "route" - the ties to [RouterLink] attributes (if a "href" is also present, then the default behavior is to ditch the "href" and use "route")
- "href" - the url to launch in a new browser window
- "faIcon" - a font-awesome icon. see ng2-font-awesome
- "img" - an image file you'd like to use as an icon
- "links" - an array of ILimberLink
say your component's template looks like this:
you end up with a nav ul containing router directives, hyperlinks, and a dropdown menu.:
make it do what you want
the idea is to program less but limber does let you override the properties of a link at run time through a callback function:
create a function with the signature:
customize:ILimberLink;
for example:
customizeLink =
The customize callback above removes the router link from each link, creates a hyperlink to duckduckgo, sets a faIcon and sets the text to "I'm with stupid".
the customize callback is called over each link and recursively over link.links.
now update your template:
and you end up with this:
inputs
endPoint: string; // the http endpoint to get your json navClass: string; // css class e.g., 'nav nav-bar' allowEdit: boolean = false; // NOT YET IMPLEMENTED customize:ILimberLink; // modify your link as it is loaded