# 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](https://github.com/gforceg/ng2-limber/blob/master/src/interfaces.ts) and pulled at runtime to create menus using ng2-limber's [LimberLinkGroupComponent](https://github.com/gforceg/ng2-limber/blob/master/src/limber-link-group/limber-link-group.component.ts).

## 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:

```json
[
  {"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](https://github.com/gforceg/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:

```html
<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.:

![alt text](https://github.com/gforceg/ng2-limber/raw/master/readme/screen-shot1.png "screen shot")

## 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:

```typescript
@Input() customize: (link: ILimberLink) => ILimberLink;
```

for example:

```typescript
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:

```html
<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:

![alt text](https://github.com/gforceg/ng2-limber/raw/master/readme/screen-shot2.png "screen shot")


## inputs

[LimberLinkGroupComponent](https://github.com/gforceg/ng2-limber/blob/master/src/limber-link-group/limber-link-group.component.ts):

```typescript
  @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
```