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

1. import your favorite bootstrap css file
2. 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

LimberLinkGroupComponent:

  @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