emilol / angular-crumbs Goto Github PK

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request

Create a live demo including the most downloaded angular styling frameworks

• Angular Material
• Bootstrap
• PrimeNG

Is there any reason why versions greater than 6 are excluded in package-dist.json?
"@angular/*": ">=2.0.0 <7.0.0"

I would suggest changing peer dependencies to
"@angular/*": ">=2.0.0"
This is the way many other libraries do it (e.g. @ngx-translate/core)

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

When a non-terminal route with a breadcrumb is modified using BreadcrumbService.changeBreadcrumb, the custom breadcrumb name is only used when the route is terminal. If a child route is navigated to, the parent reverts to whatever is in route parameters.

Minimal reproduction of the problem with instructions

app.route.ts

export const rootRouterConfig: Routes = [
  ...
  {path: 'github', ..., data: { breadcrumb: 'GitHub'},
    children: [
      {path: '', ...},
      {path: ':org', component: OrganisationComponent, data: { breadcrumb: 'Organisation'},
        children: [
          {path: '', ... },
          {path: ':repo', ..., data: { breadcrumb: 'Repo'}}
        ]
      }
    ]
  }
];

organisation.component.ts

@Component({ ... })
export class OrganisationComponent {
  organisation: { name?:string } = {};

  ngOnInit() {
    route.params.subscribe(params => {
      this.setOrganisationCrumb(params['org']);
    });
  }

  setOrganisationCrumb(organisationName: string) {
    this.breadcrumbService.changeBreadcrumb(this.route.snapshot, organisationName);
  }
}

Current behavior

#/github/Angular, #/github/VueJs

GitHub > Angular

GitHub > VueJs

#/github/Angular/samples, #/github/VueJs/vue

GitHub > Organisation > samples

GitHub > Organisation > vue

Expected behavior

Always display the custom display name. e.g.

#/github/Angular/samples, #/github/VueJs/vue

GitHub > Angular > samples

GitHub > VueJs > vue

Ok, I believe I had solved this problem. You need to change:

 private createUrl(route: ActivatedRouteSnapshot) {
        return route.url.map(function (s) { return s.toString(); }).join('/');
 }

to

 private createUrl(route: ActivatedRouteSnapshot) {
        return route.url.map(s => s.path).join('/');
 }

otherwise it will perform a URL encode twice.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Hi,

Could you pls help me how to achieve below breadcrumbs format ?

Users List > View User > John

in my view-user-component.ts
am calling breadcurmb service after resp like this

if(resp){
 this.breadcrumbService.changeBreadcrumb(this.activatedRoute.snapshot, resp.firstName);
|

user-routing-module.ts

 { path: 'view-user/:id', component: ViewSelectedUsersComponent, 
   data: { 
              breadcrumb: 'View User' 
           } 
},

Am able to see only Users List > John but i want show like Users List > View User > John

Pls help me on this

I have a strange situation I was hoping someone could help me with. When I navigate around in my application, everything works the way it is supposed to. But when I enter a url on the command line that contains a space in an argument, the router link in the breadcrumb is wrong.

Here is an example of my URL: http://localhost:12345/my-abs/trans/tran/AFG%202013-1/keymetrics

After entering the URL and going directly to the page, I hover over the parent breadcrumb link, and it shows this: http://localhost:12345/my-abs/trans/tran/AFG%25202013-1

...and of course if I click the link, the new route fails. It is putting an extra "25" in the link of the parent.

I would have had a go at fixing this myself (and sending you the changes), but it looks like this repository isn't the same one that feeds into angular2_crumbs in npm.

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 :)

Hi there, I was interested in using v2 and v3 but they are not published on npm. Will they be published?

We are able to display the breadcrumbs, but those are not clickable. Seems that "route.terminal" is always coming as true not sure why.

@emilol @mmmichl Please respond whether there will be any update in the future or not.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request

Current behavior

After every route event, custom breadcrumb titles for the full hierarchy have to be set again.

Expected behavior

If any part of the route stays the same, maintain the custom title.

I have to save any file and then works.
angular/cli 1.1.3

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

In my project most of my routes are lazy loaded, when I try to load the website for the first time the breadcrumb element displays nothing. but, after navigating to next page the breadcrumb element displays routes normally as usual.

Expected behavior

breadcrumb element should display route breadcrumb data on website load even if route is lazy loaded

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version:  v10.13.0
- Platform:   Windows 

Others:

ERROR in Error encountered resolving symbol values statically. Calling function 'BreadcrumbModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/project/src/app/app.module.ts, resolving symbol AppModule in C:/project/src/app/app.module.ts

If I save any files everything works.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Dynamic Breadcrumb Change For Lazy loaded modules is not working
The Method changeBreadcrumb is not changing the breadcrumbs dynamically for lazy loaded modules

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

I have copied your sample code and implemented in my project, breadcrumb is changing but child component is not loading. Even i checked in console there is not error. please suggest.

Expected behavior

It should load child component.

Minimal reproduction of the problem with instructions

{ path: 'overall', component: OverallPageComponent, data: { breadcrumb: 'Overall'},
children: [
{ path: 'project', component: ProjectPageComponent, data: { breadcrumb: 'Project'}}
]
}

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [X ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX   V6.9.1
- Platform:   Windows

Others: