title: Angular Breadcrumb
body: <p>I am trying to implement breadcrumb in my personal project(Angular 7). But I am unable to implement it as expected. I have found lot of implementation but none of them worked for me.<br /></p>
  
  <p>My requirement when i enter the URL : <a href="http://localhost:4200/personal-projects/2/backlog" rel="nofollow noreferrer">http://localhost:4200/personal-projects/2/backlog</a> is<br />
  <strong>Personal Project > 2 > Backlog</strong> <br />
  But i am getting output as: <br />
  <strong>2 > Backlog</strong></p>
  
  <p>Can anyone help me to implement logic to get the output as expected?
  My routing model is as follows:</p>
  
  <pre><code>const routes: Routes = [
      {
          path: '',
          redirectTo: 'dashboard',
          pathMatch: 'full'
      },
      {
          path: '',
          component: HomeDashboardComponent,
          children: [
              {
                  path: 'dashboard',
                  component: DashComponent,
                  data: {
                      breadcrumb: 'Dashboard'
                  }
              },
              {
                  path: 'personal-projects',
                  component: PresonalProjectsComponent,
                  data: {
                      breadcrumb: 'Personal Project'
                  }
              }
          ]
      },
      {
          path: 'personal-projects/:projectId',
          component: ProjectDetailsComponent,
          data: {
              breadcrumb: ''
          },
          children: [
              {
                  path: '',
                  redirectTo: 'backlog',
                  pathMatch: 'full'
              },
              {
                  path: 'sprint',
                  component: SprintComponent,
                  data: {
                      breadcrumb: 'Sprint'
                  }
              },
              {
                  path: 'backlog',
                  component: BacklogComponent,
                  data: {
                      breadcrumb: 'backlog'
                  }
              }
          ]
      }
  ];
  </code></pre>
  
  <p>breadcrumb.component.ts file as:</p>
  
  <pre><code>public breadcrumbs: IBreadCrumb[];
  
    constructor(
      private router: Router,
      private activatedRoute: ActivatedRoute,
    ) {
      this.breadcrumbs = this.buildBreadCrumb(this.activatedRoute.root);
    }
  
    ngOnInit() {
      this.router.events.pipe(
        filter((event) =&gt; event instanceof NavigationEnd),
        distinctUntilChanged(),
      ).subscribe(() =&gt; {
        this.breadcrumbs = this.buildBreadCrumb(this.activatedRoute.root);
      });
    }
  
    /**
     * Recursively build breadcrumb according to activated route.
     * @param route
     * @param url
     * @param breadcrumbs
     */
    buildBreadCrumb(route: ActivatedRoute, url: string = '', breadcrumbs: IBreadCrumb[] = []): IBreadCrumb[] {
      // If no routeConfig is avalailable we are on the root path
      let label = route.routeConfig &amp;&amp; route.routeConfig.data ? route.routeConfig.data.breadcrumb : '';
      let isClickable = route.routeConfig &amp;&amp; route.routeConfig.data &amp;&amp; route.routeConfig.data.isClickable;
      let path = route.routeConfig &amp;&amp; route.routeConfig.data ? route.routeConfig.path : '';
  
      // If the route is dynamic route such as ':id', remove it
      const lastRoutePart = path.split('/').pop();
      const isDynamicRoute = lastRoutePart.startsWith(':');
      if (isDynamicRoute &amp;&amp; !!route.snapshot) {
        const paramName = lastRoutePart.split(':')[1];
        path = path.replace(lastRoutePart, route.snapshot.params[paramName]);
        label = route.snapshot.params[paramName];
      }
  
      // In the routeConfig the complete path is not available,
      // so we rebuild it each time
      const nextUrl = path ? `${url}/${path}` : url;
  
      const breadcrumb: IBreadCrumb = {
        label: label,
        url: nextUrl,
      };
  
      // Only adding route with non-empty label
      const newBreadcrumbs = breadcrumb.label ? [...breadcrumbs, breadcrumb] : [...breadcrumbs];
      if (route.firstChild) {
        // If we are not on our current path yet,
        // there will be more children to look after, to build our breadcumb
        return this.buildBreadCrumb(route.firstChild, nextUrl, newBreadcrumbs);
      }
      return newBreadcrumbs;
    }
  }
  </code></pre>