Nuclear Package Magnet

    ng6-breadcrumbs
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    ng6-breadcrumbs

    npm version

    ng2-breadrumbs is a module for Angular that generates a breadcrumb for any page of your application. It is based on the built-in Angular router.

    Demo

    Usage

    Getting started

    1.Install ng6-breadcrumbs via npm:

    npm install --save ng6-breadcrumbs

    2.Import the BreadcrumbsModule within your app:

    import {BreadcrumbsModule} from "ng6-breadcrumbs";
     
    @NgModule({
      imports: [
        BreadcrumbsModule,
      ],
    })

    3.Add a name to your route by adding a breadcrumb property in the route's data:

    export const ROUTES: Routes = [
        {path: '', redirectTo: 'home', pathMatch: 'full'},
        {
            path: 'home',
            loadChildren: 'app/home/home.module#HomeModule',
            data: {
                breadcrumb: 'Home'
            }
        },
        {
            path: 'stores',
            loadChildren: 'app/stores/stores.module#StoresModule',
            data: {
                breadcrumb: 'Stores'
            }
        }
    ];

    4.Put the BreadcrumbsComponent's selector within your template:

    <breadcrumb [allowBootstrap]="true"></breadcrumb>
    <router-outlet></router-outlet>
    1. Then your StoresModule's routes will look like this:
    const STORE_ROUTES: Routes = [
        {
            path: '',
            component: StoresComponent
        },
        {
            path: 'books',
            data: {
                breadcrumb: 'Books'
            },
            loadChildren: 'app/books/books.module#BooksModule'
        }
     
    ];

    Adding dynamic routes

    In case you want a dynamic breadcrumb name, you can pass it as a :breadcrumb route parameter when navigating: Route:

    //Add an extra route parameter that will contain the breadcrumb name
    const BOOK_ROUTES: Routes = [
        {
            path: '',
            component: BooksComponent
        },
        {
            path: 'book/:id/:breadcrumb',
            component: BookComponent
        }
    ];

    Router code:

        public goToBook(book: Book) {
            this.router.navigate(['book' , book.Id, book.Name], { relativeTo: this.route });
        }
    

    Adding routes manually

    In case the router configuration does not satisfy the way you want to design your breadcrumb structure, you can do it manually through BreadcrumbsService. You can add your custom breadcrumbs through your route's routable component, for example:

    export class MyRoutableComponent {
      constructor( private breadcrumbsService:BreadcrumbsService) {
      }
    
      ngOnInit() {
        this.breadcrumbs.store([{label: 'Home' , url: '/', params: []},{label: 'Careers' , url: '/careers', params: []}, {label:  'MyCustomRouteLabel' , url: '', params: []} ])
      }
    }
    
    

    Prefixing routes

    Suppose that you already have your breadcrumbs generated, but due to the nesting of the routers, you want to add a breadcrumb from the parent router:

    this.breadcrumbs.storePrefixed({label: 'Home' , url: '/', params: []})
    

    Breadcrumb format

    The BreadcrumbsService's store' andstorePrefixed` methods breadcrumb objects. A breadcrumb object should contain:

    • label - The text displayed on the breadcrumb
    • url - The link that it leads to
    • params - A collection of route parameters

    TODO

    1. Add more use cases (using routerLinks, for example).

    Install

    npm i ng6-breadcrumbs

    DownloadsWeekly Downloads

    415

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    22.6 kB

    Total Files

    19

    Last publish

    Collaborators

    • ekavalionak