feat(arc): implement breadcrumb feature

GH-126

Author: Vaibhav Bhalla

package-lock.json

@@ -1,8 +1,10 @@
-export const USERS = [
+import {TitleDetails, UserDetails} from './user-title.interface';
+
+export const USERS: UserDetails[] = [
   {id: '123', name: 'John Doe', email: 'john.doe123@example.com'},
   {id: '124', name: 'Jane Smith', email: 'jane.smith124@example.com'},
 ];
-export const TITLES = [
+export const TITLES: TitleDetails[] = [
   {id: '1', title: 'Contract.pdf'},
   {id: '2', title: 'Appointment.pdf'},
 ];

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/mock-data.constants.ts

@@ -1,9 +1,9 @@
-export interface User {
+export interface UserDetails {
   id: string;
   name: string;
   email: string;
 }
-export interface Title {
+export interface TitleDetails {
   id: string;
   title: string;
 }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title.interface.ts

@@ -1,14 +1,23 @@
 import {Component} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {Title} from '../user-title.interface';
+import {TitleDetails} from '../user-title.interface';
+import {TitleService} from './user-title.service';
 
 @Component({
   selector: 'lib-user-title',
   templateUrl: './user-title.component.html',
 })
 export class UserTitleComponent {
-  title: Title;
-  constructor(private readonly route: ActivatedRoute) {
-    this.title = this.route.snapshot.data['document'];
+  title: TitleDetails;
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly titleService: TitleService,
+  ) {
+    const id = this.route.snapshot.paramMap.get('id');
+    if (id) {
+      this.titleService.getTitleById(id).subscribe(title => {
+        this.title = title;
+      });
+    }
   }
 }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.component.ts

@@ -1,13 +1,19 @@
-import {Injectable} from '@angular/core';
-import {Observable, of} from 'rxjs';
+import {catchError, delay, map, Observable, of} from 'rxjs';
 import {TITLES} from '../mock-data.constants';
+import {TitleDetails} from '../user-title.interface';
 
-@Injectable()
 export class TitleService {
   private readonly titles = TITLES;
 
-  getTitleById(id: string): Observable<any> {
+  getTitleById(id: string): Observable<TitleDetails> {
     const title = this.titles.find(u => u.id === id);
     return of(title);
   }
+  getTitleNameForBreadcrumb(id: string): Observable<string> {
+    return this.getTitleById(id).pipe(
+      map(titles => titles?.title || `Document #${id}`),
+      catchError(() => of(`Document #${id}`)),
+      delay(2000), // Simulating network delay
+    );
+  }
 }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.resolver.ts

@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {Component} from '@angular/core';
 import {ActivatedRoute, RouterModule} from '@angular/router';
-import {User} from '../user-title.interface';
-import {UserResolver} from './user.resolver';
+import {UserDetails} from '../user-title.interface';
+import {UserService} from './user.service';
 
 @Component({
   selector: 'lib-user',
@@ -11,9 +11,17 @@ import {UserResolver} from './user.resolver';
   imports: [CommonModule, RouterModule],
 })
 export class UserComponent {
-  user: User;
+  user: UserDetails;
 
-  constructor(private readonly route: ActivatedRoute) {
-    this.user = this.route.snapshot.data['user'];
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly userService: UserService,
+  ) {
+    const id = this.route.snapshot.paramMap.get('id');
+    if (id) {
+      this.userService.getUserById(id).subscribe(user => {
+        this.user = user;
+      });
+    }
   }
 }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.service.ts

@@ -1,13 +1,19 @@
-import {Injectable} from '@angular/core';
-import {Observable, of} from 'rxjs';
+import {catchError, delay, map, Observable, of} from 'rxjs';
 import {USERS} from '../mock-data.constants';
+import {UserDetails} from '../user-title.interface';
 
-@Injectable()
 export class UserService {
   private readonly users = USERS;
 
-  getUserById(id: string): Observable<any> {
+  getUserById(id: string): Observable<UserDetails> {
     const user = this.users.find(u => u.id === id);
     return of(user);
   }
+  getUserNameForBreadcrumb(id: string): Observable<string> {
+    return this.getUserById(id).pipe(
+      map(user => user?.name || `User #${id}`),
+      catchError(() => of(`User #${id}`)),
+      delay(4000),
+    );
+  }
 }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.component.ts

@@ -2,7 +2,7 @@ import {Component, Input, isDevMode, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Breadcrumb} from './breadcrumb.interface';
 import {BreadcrumbService} from './breadcrumb.service';
-import {Observable} from 'rxjs';
+import {Observable, Subject, takeUntil} from 'rxjs';
 import {RouterModule} from '@angular/router';
 
 @Component({
@@ -22,14 +22,19 @@ export class BreadcrumbComponent implements OnInit {
   @Input() itemClass = 'breadcrumb-item';
 
   expanded = false;
+  private destroy$ = new Subject<void>();
   constructor(private readonly breadcrumbService: BreadcrumbService) {}
   ngOnInit(): void {
-    this.breadcrumbs$.subscribe(breadcrumbs => {
+    this.breadcrumbs$.pipe(takeUntil(this.destroy$)).subscribe(breadcrumbs => {
       if (isDevMode()) {
         console.log('Breadcrumbs:', breadcrumbs);
       }
     });
   }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
   toggleExpand() {
     this.expanded = true;
   }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.resolver.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, Injector} from '@angular/core';
 import {ActivatedRouteSnapshot, NavigationEnd, Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
 import {filter} from 'rxjs/operators';
@@ -8,10 +8,13 @@ import {Breadcrumb} from './breadcrumb.interface';
 export class BreadcrumbService {
   private readonly breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
 
-  constructor(private readonly router: Router) {
+  constructor(
+    private readonly router: Router,
+    private readonly injector: Injector,
+  ) {
     this.router.events
       .pipe(filter(event => event instanceof NavigationEnd))
-      .subscribe(() => {
+      .subscribe(async () => {
         const root = this.router.routerState.snapshot.root;
         const breadcrumbs = this.buildBreadcrumbs(root);
         this.breadcrumbs$.next(breadcrumbs);
@@ -30,14 +33,16 @@ export class BreadcrumbService {
     }
 
     let path = route.routeConfig.path || '';
+
+    // Replace route params like :id with actual values
     Object.keys(route.params).forEach(key => {
       path = path.replace(`:${key}`, route.params[key]);
     });
     const nextUrl = path ? `${url}/${path}` : url;
-    const label = this._resolveLabel(route, path);
+    const label = this._resolveLabel(route, path, nextUrl);
     const skipLink = route.routeConfig.data?.['skipLink'] ?? false;
 
-    if (label) {
+    if (label && label.trim() !== '') {
       breadcrumbs.push({label, url: nextUrl, skipLink});
     }
 
@@ -50,22 +55,54 @@ export class BreadcrumbService {
     return str.replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
   }
 
-  private _resolveLabel(route: ActivatedRouteSnapshot, path: string): string {
-    const breadcrumbData = route.routeConfig.data?.['breadcrumb'];
+  private _resolveLabel(
+    route: ActivatedRouteSnapshot,
+    path: string,
+    currentUrl: string,
+  ): string {
+    const data = route.routeConfig?.data;
+
+    //async breadcrumb logic
+    const asyncConfig = data?.asyncBreadcrumb;
+    if (asyncConfig?.service && asyncConfig?.method) {
+      const params = route.paramMap;
+      const paramValue = params.get('id');
+      const fallback =
+        asyncConfig.fallbackLabel?.(params) || this._toTitleCase(path);
+      const loadingLabel = asyncConfig.loadingLabel || fallback;
 
-    if (typeof breadcrumbData === 'function') {
-      return breadcrumbData(route.data, route.paramMap, route);
+      setTimeout(async () => {
+        try {
+          const serviceInstance = this.injector.get(asyncConfig.service);
+          const result$ = serviceInstance[asyncConfig.method](paramValue);
+          const result = await result$.toPromise();
+          this.updateBreadcrumbLabel(currentUrl, result);
+        } catch (error) {
+          console.warn('Async breadcrumb load failed:', error);
+        }
+      }, 0);
+
+      return loadingLabel;
     }
+    const breadcrumbData = data?.['breadcrumb'];
+
     if (typeof breadcrumbData === 'string') {
       return breadcrumbData;
     }
-    if (route.routeConfig.path?.startsWith(':')) {
-      const paramName = route.routeConfig.path.slice(1);
-      return route.params[paramName] ?? paramName;
-    }
+
     return this._toTitleCase(path);
   }
-
+  updateBreadcrumbLabel(url: string, newLabel: string): void {
+    const currentBreadcrumbs = this.breadcrumbs$.getValue();
+    const index = currentBreadcrumbs.findIndex(bc => bc.url === url);
+    if (index !== -1) {
+      currentBreadcrumbs[index] = {
+        ...currentBreadcrumbs[index],
+        label: newLabel,
+      };
+      this.breadcrumbs$.next([...currentBreadcrumbs]);
+    }
+  }
   get breadcrumbs() {
     return this.breadcrumbs$.asObservable();
   }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.service.ts

@@ -23,6 +23,8 @@ import {BreadcrumbComponent, GanttModule} from '@project-lib/components/index';
 import {SelectModule} from '@project-lib/components/selector';
 import {HeaderComponent} from '@project-lib/components/header/header.component';
 import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.component';
+import {UserService} from '@project-lib/components/breadcrumb/breadcrumb-demo/user/user.service';
+import {TitleService} from '@project-lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.service';
 
 @NgModule({
   declarations: [AppComponent],
@@ -49,6 +51,8 @@ import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.componen
     TranslateStore,
     SystemStoreFacadeService,
     EnvAdapterService,
+    UserService,
+    TitleService,
     ApiService,
     {
       provide: APP_CONFIG,

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -19,7 +19,17 @@ <h3>1.Basic Breadcrumb</h3>
     <pre>{{ basicCode }}</pre>
   </div>
 
-  <h3>2.Dynamic Handling Breadcrumb</h3>
+  <h3>2. Dynamic Handling Breadcrumb</h3>
+  <p>
+    This example demonstrates how breadcrumbs can be dynamically generated and
+    updated based on route parameters and asynchronous data fetching from
+    services. Instead of relying on blocking resolvers, the breadcrumb labels
+    are initially displayed using fallback or loading placeholders (e.g.,
+    "Loading user...") and are automatically updated when the actual data
+    becomes available from the API or service. This approach ensures smooth
+    navigation and improves user experience by preventing full page loading
+    delays while keeping the breadcrumb context accurate and dynamic.
+  </p>
 
   <ul class="breadcrumb">
     <li>Main</li>
@@ -59,24 +69,25 @@ <h3>Routing Code</h3>
     </div>
 
     <div class="code-block">
-      <h3>Resolver Code</h3>
+      <h3>Service Code</h3>
       <span
         class="copy-icon"
-        (click)="copyCode(resolverCode)"
-        title="Copy Resolver Code"
+        (click)="copyCode(serviceCode)"
+        title="Copy Service Code"
         >📋</span
       >
-      <pre>{{ resolverCode }}</pre>
+      <pre>{{ serviceCode }}</pre>
     </div>
+
     <div class="code-block">
-      <h3>Service Code</h3>
+      <h3>Async Breadcrumb Logic</h3>
       <span
         class="copy-icon"
-        (click)="copyCode(serviceCode)"
-        title="Copy Service Code"
+        (click)="copyCode(asyncLogicCode)"
+        title="Copy Async Logic Code"
         >📋</span
       >
-      <pre>{{ serviceCode }}</pre>
+      <pre>{{ asyncLogicCode }}</pre>
     </div>
   </div>
   <h3>3. Breadcrumb Inputs</h3>
@@ -102,10 +113,6 @@ <h3>3. Breadcrumb Inputs</h3>
         <td>skipLink</td>
         <td>A flag to disable click navigation on a breadcrumb</td>
       </tr>
-      <tr>
-        <td>resolver</td>
-        <td>Angular service that pre-fetches data before routing</td>
-      </tr>
       <tr>
         <td>separatorClass</td>
         <td>Custom class applied to the separator between breadcrumb items</td>