refactor(breadcrumb-router): migrate breadcrumbs$ toSignal, use attrib prop for breadcrumb item, test update, cleanup

Author: xidedix

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

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

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.spec.ts

@@ -2,7 +2,6 @@ import { ComponentRef } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { provideRouter, Route } from '@angular/router';
 import { RouterTestingHarness } from '@angular/router/testing';
-import { take } from 'rxjs';
 
 import { BreadcrumbRouterComponent } from './breadcrumb-router.component';
 import { BreadcrumbRouterService } from './breadcrumb-router.service';
@@ -40,33 +39,25 @@ describe('BreadcrumbComponent', () => {
   });
 
   it('should have breadcrumbs', () => {
-    expect(component.breadcrumbs).toBeDefined();
+    expect(component.breadcrumbs()).toBeDefined();
   });
 
   it('should get breadcrumbs from service', async () => {
     const comp = await harness.navigateByUrl('/home');
-    component.breadcrumbs?.pipe(take(1)).subscribe((breadcrumbs) => {
-      expect(breadcrumbs).toEqual([{ label: 'Home', url: '/home', queryParams: {} }]);
-    });
+    expect(component.breadcrumbs()).toEqual([{ label: 'Home', url: '/home', queryParams: {} }]);
   });
   it('should get breadcrumbs from service', async () => {
     const comp = await harness.navigateByUrl('/color?id=1&test=2');
-    component.breadcrumbs?.pipe(take(1)).subscribe((breadcrumbs) => {
-      expect(breadcrumbs).toEqual([{ label: 'Color', url: '/color', queryParams: { id: '1', test: '2' } }]);
-    });
+    expect(component.breadcrumbs()).toEqual([{ label: 'Color', url: '/color', queryParams: { id: '1', test: '2' } }]);
   });
   it('should get breadcrumbs from service', async () => {
     const comp = await harness.navigateByUrl('/');
-    component.breadcrumbs?.pipe(take(1)).subscribe((breadcrumbs) => {
-      expect(breadcrumbs).toEqual([{ label: '', url: '/', queryParams: {} }]);
-    });
+    expect(component.breadcrumbs()).toEqual([{ label: '', url: '/', queryParams: {} }]);
   });
 
   it('should emit breadcrumbs on items change', () => {
-    componentRef.setInput('items', [{ label: 'test' }]);
+    componentRef.setInput('items', [{ label: 'test', url: '/color', attributes: { title: 'test' } }]);
     fixture.detectChanges();
-    component.breadcrumbs?.pipe(take(1)).subscribe((breadcrumbs) => {
-      expect(breadcrumbs).toEqual([{ label: 'test' }]);
-    });
+    expect(component.breadcrumbs()).toEqual([{ label: 'test', url: '/color', attributes: { title: 'test' } }]);
   });
 });

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

@@ -1,6 +1,5 @@
-import { Component, effect, inject, input, OnDestroy, OnInit } from '@angular/core';
-import { Observable, Observer } from 'rxjs';
-import { AsyncPipe } from '@angular/common';
+import { Component, computed, inject, input } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 import { IBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item';
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
@@ -10,35 +9,20 @@ import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.comp
 @Component({
   selector: 'c-breadcrumb-router, [cBreadcrumbRouter]',
   templateUrl: './breadcrumb-router.component.html',
-  imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe]
+  imports: [BreadcrumbComponent, BreadcrumbItemComponent]
 })
-export class BreadcrumbRouterComponent implements OnDestroy, OnInit {
-  readonly service = inject(BreadcrumbRouterService);
+export class BreadcrumbRouterComponent {
+  readonly #breadcrumbRouterService = inject(BreadcrumbRouterService);
 
   /**
    * Optional array of IBreadcrumbItem to override default BreadcrumbRouter behavior. [docs]
    * @return IBreadcrumbItem[]
    */
   readonly items = input<IBreadcrumbItem[]>();
-  public breadcrumbs: Observable<IBreadcrumbItem[]> | undefined;
 
-  ngOnInit(): void {
-    this.breadcrumbs = this.service.breadcrumbs$;
-  }
+  readonly #breadcrumbs = toSignal(this.#breadcrumbRouterService.breadcrumbs$);
 
-  readonly setup = effect(() => {
-    const items = this.items();
-    if (items && items.length > 0) {
-      this.breadcrumbs = new Observable<IBreadcrumbItem[]>((observer: Observer<IBreadcrumbItem[]>) => {
-        const itemsValue = this.items();
-        if (itemsValue) {
-          observer.next(itemsValue);
-        }
-      });
-    }
+  readonly breadcrumbs = computed(() => {
+    return this.items() ?? this.#breadcrumbs() ?? [];
   });
-
-  ngOnDestroy(): void {
-    this.breadcrumbs = undefined;
-  }
 }