Breadcrumb generator for Angular 5

Downloads in past


6090.1.2816 years ago7 years agoMinified + gzip package size for ng2-breadcrumbs in KB


NOTE: This package is still under development. Contributions are appreciated.
npm version ng2-breadrumbs is a module for Angular 4 that generates a breadcrumb for any page of your application. It is based on the built-in Angular 4 router.

Getting started

1.Install ng2-breadcrumbs via npm: ```bash npm install --save ng2-breadcrumbs ``` 2.Import the BreadcrumbsModule within your app: ```js import {BreadcrumbsModule} from "ng2-breadcrumbs"; @NgModule({ imports:
, }) ``` 3.Add a name to your route by adding a breadcrumb property in the route's data: ```js export const routes: Routes = {
path: 'home',
data: {
breadcrumb: 'Home',
component: HomeComponent
``` 4.Put the BreadcrumbsComponent's selector within your template: ```html ```

Adding dynamic routes

In case you want a dynamic breadcrumb name, you can pass it as a :breadcrumb route parameter when navigating: Route: ```js
//Add an extra route parameter that will contain the breadcrumb name
path: ':id/:breadcrumb',
component: ProfileBreadcrumbDetails,
``` Router code: ```
public name = 'John Doe';
public id = 3;
goToDetails() {
//This will put 'John_Doe' as a route parameter
this._router.navigate([`/profiles`,, /g,"_")]);
1. Add more use cases (using routerLinks, for example). 2. Document BreadcrumbService. 3. Add demo.