Repository navigation
Improvement: dynamic breadcrumb 'displayName' from Routing #17
Description
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):
- 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
};
}
- 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 :)
Activity
emilol commentedon Nov 24, 2018
Thanks for the suggestion @aalmajanob -
angular-crumbshas something baked in for this - you can set dynamic crumbs based on route values using theBreadcrumbService.changeBreadcrumbmethod:The demo app also has an example where the crumb is set based on the
:organd:repoparameters for a github repo.aalmajanob commentedon Nov 24, 2018
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 commentedon Mar 14, 2019
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