CODEWITHSUNDEEP
angularroutesangular-routingbreadcrumbs
Redriel
Redriel

Reputation: 77

Angular Breadcrumb that shows the route the user took to reach the current page

I started working with Angular a few days ago. I have to add a clickable breadcrumb to a site that shows to the user the route taken to land on that page. For example, the page Products can be reached from the Home and from the Shop. If the user is in the Home and clicks on Products, this is what I want to be shown:

Home > Products

But, if he user is in the Home, clicks on Shop and then on Products, I want this:

Home > Shop > Products

Note that in the app-routing.module.ts Products is not a child of Shop nor Shop is a child of Home. I cannot modify the routing so every page in the entire site is a "stand-alone".

Is this possible? Do you have any advice or implementation that could possibly help me? Thanks!

Upvotes: 2

Views: 7604

Answers (1)

YaakovHatam
YaakovHatam

Reputation: 2344

Routing data is one of my favorite option to achieve things like you posted.

In your routing config array:

  {
    path: 'Shop',
    component: ShopComponent,
    data: { breadcrumbs: ['home'] }
  }, {
    path: 'Products',
    component: ProductsComponent,
    data: { breadcrumbs: ['home', 'Shop'] }
  },

and you can use it inside your components like:

constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.activatedRoute.data.subscribe(d => {
      console.log(d.breadcrumbs) // ['home']
    })
  }

You can read more at: https://angular.io/guide/router#configuration

Upvotes: 2

Related Questions