ng-navbar

RangoNavbar

This library was generated with Angular CLI version 8.1.2.

Usage

Edit the angular.json :

• Go to section apps and find styles array inside it (with only styles.css value by default), add the following line inside array before any styles:

  "./node_modules/materialize-css/dist/css/materialize.css"

• Go to section apps and find scripts array inside it, and add the following lines inside array

   "./node_modules/hammerjs/hammer.js",
   "./node_modules/materialize-css/dist/js/materialize.js"```

• Add this line to header of index.html to get Linearicons icons

  <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

  Put your logo in assets/imgs/ and give it the name ng_navbar_logo.png

In app.module.ts

...
import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';
import { RangoNavbarModule } from 'rango-navbar';
...

@NgModule({
  ...
  imports: [..., MaterializeModule, RangoNavbarModule],
  ...
})

In component.ts

@Component({
  ...
})
export class AppComponent {
  ...
  routing = [{ path: 'a', name: 'a', span: 'Hey', spanClass: 'lnr lnr-user' }];
  ...
}

Name	Use
path (optional)	routing path 📓 Make sure it has a name corresponding to a path in your AppRoutingModule
name	The name to display on the navbar 📓 This could be the name of a link or the name of a user
span (optional)	A text before the name of the route
spanClass (optional)	A Linearicon

In component.html

<rango-navbar [routing]="routing"></rango-navbar>

With ❤️! from theHinneh.