In Angular, displaying the complete breadcrumb navigation for parent and children routes can be achieved by setting up a breadcrumb service to keep track of the routes and their respective breadcrumbs. This service will be utilized in a breadcrumb component to render the breadcrumb navigation on the template.

Here's a step-by-step guide to implement breadcrumb navigation that displays all levels for parent and children routes:

  1. Create a Breadcrumb Service: Start by creating a breadcrumb service to keep track of the routes and their corresponding breadcrumb labels. The breadcrumb service should be injectable throughout the application.

    typescript
    // breadcrumb.service.ts import { Injectable } from '@angular/core'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { BehaviorSubject, Observable } from 'rxjs'; import { filter, map, distinctUntilChanged } from 'rxjs/operators'; interface Breadcrumb { label: string; url: string; } @Injectable({ providedIn: 'root' }) export class BreadcrumbService { private breadcrumbsSubject: BehaviorSubject<Breadcrumb[]> = new BehaviorSubject<Breadcrumb[]>([]); breadcrumbs$: Observable<Breadcrumb[]> = this.breadcrumbsSubject.asObservable(); constructor(private router: Router, private activatedRoute: ActivatedRoute) { this.router.events .pipe( filter((event) => event instanceof NavigationEnd), distinctUntilChanged(), map(() => this.buildBreadcrumbs(this.activatedRoute.root)) ) .subscribe((breadcrumbs) => this.breadcrumbsSubject.next(breadcrumbs)); } private buildBreadcrumbs(route: ActivatedRoute, url: string = '', breadcrumbs: Breadcrumb[] = []): Breadcrumb[] { const path = route.routeConfig?.path || ''; const label = route.routeConfig?.data?.breadcrumb || ''; const nextUrl = `${url}${path}/`; const breadcrumb: Breadcrumb = { label, url: nextUrl, }; const newBreadcrumbs = label ? [...breadcrumbs, breadcrumb] : breadcrumbs; if (route.firstChild) { return this.buildBreadcrumbs(route.firstChild, nextUrl, newBreadcrumbs); } return newBreadcrumbs; } }
  2. Set Breadcrumb Data in Routes: In your routing configuration, set the breadcrumb label for each route using the data property.

    typescript
    // app-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } }, { path: 'products', component: ProductsComponent, data: { breadcrumb: 'Products' }, children: [ { path: '', redirectTo: 'all', pathMatch: 'full' }, { path: 'all', component: AllProductsComponent, data: { breadcrumb: 'All Products' } }, { path: 'featured', component: FeaturedProductsComponent, data: { breadcrumb: 'Featured Products' } }, ], }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {}
  3. Create Breadcrumb Component: Now create a breadcrumb component that uses the breadcrumb service to display the breadcrumb navigation.

    html
    <!-- breadcrumb.component.html --> <div class="breadcrumb"> <a *ngFor="let breadcrumb of breadcrumbs$ | async" [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a> </div>
    typescript
    // breadcrumb.component.ts import { Component } from '@angular/core'; import { BreadcrumbService, Breadcrumb } from './breadcrumb.service'; @Component({ selector: 'app-breadcrumb', templateUrl: './breadcrumb.component.html', }) export class BreadcrumbComponent { breadcrumbs$: Observable<Breadcrumb[]> = this.breadcrumbService.breadcrumbs$; constructor(private breadcrumbService: BreadcrumbService) {} }
  4. Add Breadcrumb Component to App Template: Finally, include the breadcrumb component in your app's template to display the breadcrumb navigation.

    html
    <!-- app.component.html --> <app-breadcrumb></app-breadcrumb> <router-outlet></router-outlet>

Now, when you navigate to parent and child routes, the breadcrumb component will dynamically update and display the complete breadcrumb navigation with all levels for the current route. Remember to style the breadcrumb navigation according to your design requirements.

With this setup, the breadcrumb navigation will display all levels for parent and children routes, giving users a clear understanding of their current location within the application's route hierarchy.

Have questions or queries?
Get in Touch