ng2-limber v1.0.0-alpha.58
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:
[
{"text": "Home", "route": "home", "faIcon": "home"},
{"text": "About WebGL", "href": "https://developer.mozilla.org/en-US/docs/Learn/WebGL", "faIcon": "info-circle"},
{"text": "Something special", "href": "https://www.duckduckgo.com", "img": "assets/img/asterisk.png"},
{"text": "More options", "links":
[
{ "text": "option 1", "route": "#", "faIcon": "question-circle" },
{ "text": "option 2", "href": "https://www.duckduckgo.com", "faIcon": "map-o" }
]
}
]
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:
<nav class="navbar navbar-dark navbar-dp bg-primary">
<limber-link-group [endPoint]="'app/core/nav/navbar-right-links.json'" [navClass]="'nav navbar-nav pull-xs-right'"></limber-link-group>
</nav>
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:
@Input() customize: (link: ILimberLink) => ILimberLink;
for example:
customizeLink = (link: ILimberLink): ILimberLink => {
delete link.route;
link.href = 'https://www.duckduckgo.com';
link.text.match(/option \d/i) ? link.faIcon = 'arrow-up' : link.faIcon = 'arrow-left';
link.text = 'I`m with stupid';
return link;
}
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:
<limber-link-group [customize]="customizeLink" [endPoint]="'app/core/nav/navbar-right-links.json'" [navClass]="'nav navbar-nav pull-xs-right'" [allowEdit]="editMode"></limber-link-group>
and you end up with this:
inputs
@Input() endPoint: string; // the http endpoint to get your json
@Input() navClass: string; // css class e.g., 'nav nav-bar'
@Input() allowEdit: boolean = false; // NOT YET IMPLEMENTED
@Input() customize: (link: ILimberLink) => ILimberLink; // modify your link as it is loaded
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago