Improvement: dynamic breadcrumb 'displayName' from Routing

[aalmajanob]

Hi emilol,

First of all, nice component, I´m currently using it within a real project and it works nice with just a few improvements.

I would like to propose the following improvement (Im at work and do not have much time to make a pull request):

1. Just change the method createBreadcrumb() from here https://github.com/emilol/angular-crumbs/blob/master/src/breadcrumb.service.ts#L63 with the following:

    private createBreadcrumb(route: ActivatedRouteSnapshot, url: string): Breadcrumb {
        // Generates display text from data
        // -- Dynamic route params when ':[id]'
        let d = '';
        const split = route.data['breadcrumb'].split(' ');
        split.forEach((s: string) => {
            d += `${s.indexOf(':') > -1 ? (route.params[s.slice(1)] ? route.params[s.slice(1)] : '') : s} `;
        });
        d = d.slice(0, -1);

        return {
            displayName: d,
            terminal: this.isTerminal(route),
            url: url,
            route: route.routeConfig
        };
    }

2. This way, now it is possible to customize more the displayName:

• Static displayName (like now):
  { path: 'home', ... , data: { breadcrumb: 'Home' } }
• Or a Dynamic displayName:
  { path: ':yearId/:monthId/:dayId', component: SubhomeComponent, data: { breadcrumb: 'SubHome with Year :id Month :monthId Day :dayId} }

Regards :)

[emilol]

Thanks for the suggestion @aalmajanob - angular-crumbs has something baked in for this - you can set dynamic crumbs based on route values using the BreadcrumbService.changeBreadcrumb method:

this.route.params.subscribe(params => {
    const year = params['id'];
    const month= params['monthId'];
    const day = params['dayId'];
    this.breadcrumbService.changeBreadcrumb(this.route.snapshot, `SubHome with Year ${year} Month ${month} Day ${day}`);
});

The demo app also has an example where the crumb is set based on the :org and :repo parameters for a github repo.

[aalmajanob]

Hi emilol!,

Yes I saw this feature. It is perfect when you need a complex name, but It requires some subscriptions and reloading the items list which is much less efficient when you only requiere to use the route param!

Regards,

[Sunanda94]

Hi @emilol

I tried implementing your breadcrumb component in my application and I was successful in it.
The only thing I want to know that, how to add child routes of a particular module.

Home
User
Manage User
Add User
Update user

The above is my routing structure.
User is a module under which there are several children components.

Now, what I want is, my breadcrumb to come like the below.
Home > ManageUser > Adduser (when I am navigating to Adduser from manageuser on a button click)
or, if I am updating
Home > ManageUser > Updtateuser(when I am navigating to UpdateUse from manageuser on a button click)

I have attached my solution where i implemented your breadcrumb component.
Please go through my application and provide me some solutions .Before run my application please run command npm install
BreadCrumb.zip