refactor(breadcrumbs): signal for breadcrumb items

Author: xidedix

src/app/views/base/breadcrumbs/breadcrumbs.component.html

@@ -20,6 +20,7 @@
           .
         </p>
         <app-docs-example href="components/breadcrumb">
+          @let items = breadcrumbItems();
           <c-breadcrumb class="mb-2">
             @for (item of items; track item; let i = $index, isLast = $last) {
               <c-breadcrumb-item [active]="isLast" [url]="item.url">

src/app/views/base/breadcrumbs/breadcrumbs.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, signal } from '@angular/core';
 import { NgClass } from '@angular/common';
 import {
   BreadcrumbComponent,
@@ -17,25 +17,25 @@ import { DocsComponentsComponent, DocsExampleComponent } from '@docs-components/
   imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, NgClass, BreadcrumbRouterComponent, DocsComponentsComponent]
 })
 export class BreadcrumbsComponent implements OnInit {
-  public items = <any>[];
+  public breadcrumbItems = signal<any>([]);
 
   constructor() {}
 
   ngOnInit(): void {
-    this.items = [
+    this.breadcrumbItems.set([
       { label: 'Home', url: '/', attributes: { title: 'Home' } },
       { label: 'Library', url: '/' },
       { label: 'Data', url: '/dashboard/' },
       { label: 'CoreUI', url: '/' }
-    ];
+    ]);
 
     setTimeout(() => {
-      this.items = [
+      this.breadcrumbItems.set([
         { label: 'CoreUI', url: '/' },
         { label: 'Data', url: '/dashboard/' },
         { label: 'Library', url: '/' },
         { label: 'Home', url: '/', attributes: { title: 'Home' } }
-      ];
+      ]);
     }, 5000);
   }
 }