refactor(breadcrumb): cleanups, add routeSnapshot.title as fallback value, use control flow, use @input() transform

Author: xidedix

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
@@ -18,7 +18,7 @@ export class BreadcrumbItemComponent {
    * Toggle the active state for the component. [docs]
    * @type boolean
    */
-  @Input() active?: boolean;
+  @Input({ transform: booleanAttribute }) active?: boolean;
   /**
    * The `url` prop for the inner `[routerLink]` directive. [docs]
    * @type string

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.html

@@ -1,6 +1,6 @@
 <c-breadcrumb class="m-0">
   @for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {
-    @if (breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {
+    @if(breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {
       <c-breadcrumb-item
         [active]="last"
         [url]="breadcrumb?.url"

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.service.ts

@@ -11,15 +11,10 @@ import { IBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item';
 export class BreadcrumbRouterService {
   public outlet = 'primary';
 
-  breadcrumbs$: Observable<IBreadcrumbItem[]>;
-  private breadcrumbsBehaviorSubject: BehaviorSubject<IBreadcrumbItem[]>;
+  readonly #breadcrumbsBehaviorSubject = new BehaviorSubject<IBreadcrumbItem[]>(new Array<IBreadcrumbItem>());
+  breadcrumbs$ = this.#breadcrumbsBehaviorSubject.asObservable();
 
   constructor(private router: Router, private route: ActivatedRoute) {
-    this.breadcrumbsBehaviorSubject = new BehaviorSubject<any[]>(
-      new Array<IBreadcrumbItem>()
-    );
-
-    this.breadcrumbs$ = this.breadcrumbsBehaviorSubject.asObservable();
 
     this.router.events
       .pipe(
@@ -39,7 +34,7 @@ export class BreadcrumbRouterService {
               const routeSnapshot = childRoute.snapshot;
               url += '/' + routeSnapshot.url.map((segment) => segment.path).join('/');
               breadcrumbs.push({
-                label: childRoute.snapshot.data['title'] || '',
+                label: routeSnapshot.data['title'] ?? routeSnapshot.title ?? '',
                 url,
                 queryParams: routeSnapshot.queryParams
               });
@@ -48,9 +43,8 @@ export class BreadcrumbRouterService {
           });
         } while (currentRoute);
 
-        this.breadcrumbsBehaviorSubject.next(Object.assign([], breadcrumbs));
+        this.#breadcrumbsBehaviorSubject.next(Object.assign([], breadcrumbs));
 
-        // console.log('breadcrumbs', breadcrumbs);
         return breadcrumbs;
       });
   }