3

I tried a few breadcrumb approaches and they seem useless out of the box since most of my routes do not include enough information.

for example:

/products
/product:id
/subproudcts:productId
/subproductdetail:subproductId

each of these paths is a deeper dive into the catalog. SubProduct:500 is a child of Product:27 etc.

I would like breadcrumbs to look like this:

My Product A > SubProducts > Sub Product Detail B

by default, above paths do not contain enough information for breadcrumb component to magically figure this out.

One solution i was thinking is making routes longer like this:

/products/detail:id/subproducts
/products/detail:id/subproducts/detail:id

not sure if this is what breadcrumbs components are looking for if it's the "right" way to go.

my question is: what's a good solution to having a nice custom breadcrumb that can 1. show all paths including link to sub lists, and 2. show names of each selected parent.

Sonic Soul
  • 23,855
  • 37
  • 130
  • 196
  • Get the subproduct information from your backend. Make sure the backend returns the ID and name of its parent product along with the rest of the subproduct information. Display that information as a breadcrumb. Coupling the breadcrumbs with routing is probably not a good idea. – JB Nizet Jan 12 '17 at 22:44
  • hey JB, sure but that sounds like creating a custom control that calls some api method with EntityType and ID and renders crumbs from a returned array of links. this would bypass any route information right? i am curious what good existing breadcrumbs based on routes are if any.. or if anything else exists that i could leverage instead of writing this from scratch – Sonic Soul Jan 12 '17 at 22:48
  • Actually maybe even right routes would help you. You can add ngOnInit in component and then just parse url. THis would be probably better solution – Vova Bilyachat Jan 12 '17 at 22:52
  • hmm more i think about it the more i believe it will be necessary to call server based on current url to get this data, since it won't be available with deep linking. I think it could be available as passed data when user browses from root. so best implementation would do both. keep passing structure object when browsing site, and calling server if that data is not available from router. – Sonic Soul Jan 12 '17 at 22:55

2 Answers2

0

I would do it via service 

import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from "rxjs"

class UrlWithNameAndOtherMeta {
    url: number;
    name: string;
    getUrl() {
        return "<a href=" + this.url + ">" + name + "</a>"
    }
}

class BreadcrumbService {
    breadcrumbEmiter = new BehaviorSubject<UrlWithNameAndOtherMeta[]>([]);
    listOfItems = [];
    push(page: UrlWithNameAndOtherMeta) {
        this.listOfItems.push(page);
        this.breadcrumbEmiter.next(this.listOfItems);
    }
    pop() {
        this.listOfItems.pop();
        this.breadcrumbEmiter.next(this.listOfItems);
     }
    get breadcrumbAsObservable() : Observable<UrlWithNameAndOtherMeta[]>{
        return this.breadcrumbEmiter.asObservable();
    }
}

Then in your breadcrumb component you subscribe for breadcrumbAsObservable. After that from pages you push pop.

PS. But honestly i am not sure if I not reinventing wheel :)

Vova Bilyachat
  • 18,765
  • 4
  • 55
  • 80
  • hmm.. how does this know the current route? – Sonic Soul Jan 12 '17 at 22:50
  • @SonicSoul no you would need to write push logic when user changes page. But still it has disadvatage because if user refresh page you are in trouble. – Vova Bilyachat Jan 12 '17 at 22:51
  • yeah.. i could write something from scratch that parses current path and calls server to get the breadcrumb but seems like i'd be reinventing the wheel.. – Sonic Soul Jan 12 '17 at 22:52
  • I think its not, because what i wrote it was thinking about mobile approach but its web, and you should remember that user can just refresh page. So your idea is not really bad. Other option would be each time you get product from server you also return "path" to rebuild breadcump – Vova Bilyachat Jan 12 '17 at 22:54
0

I am a bit late to answer here. Can you please check if xng-breadcrumb handles your use-cases along with few other well-thought use cases

  • Default routing with support for nested routing
  • The declarative approach of defining breadcrumbs in routing config
  • Dynamic asynchronous way to update any route's breadcrumb
  • way to skip specific routes from displaying in breadcrumbs

you can check - https://github.com/udayvunnam/xng-breadcrumb

Demo app showing the breadcrumbs usage - https://xng-breadcrumb.netlify.com

Uday Vunnam
  • 337
  • 2
  • 5