chore(docs): add current page example for breadcrumbs

italia · Dec 4, 2024 · cdd2eec · cdd2eec
1 parent b404980
commit cdd2eec
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html
@@ -1,7 +1,7 @@
 <h3>Esempio Breadcrumb</h3>
 <div class="bd-example">
   <it-breadcrumb [dark]="isDark" [separator]="separator">
-    <it-breadcrumb-item *ngFor="let item of items" class="me-1" [href]="item.link" [iconName]="item.icon">
+    <it-breadcrumb-item *ngFor="let item of items" class="me-1" [href]="item.link" [iconName]="item.icon" [active]="item.active">
       {{ item.label }}
     </it-breadcrumb-item>
   </it-breadcrumb>

diff --git a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts
@@ -19,15 +19,18 @@ export class BreadcrumbExampleComponent {
   separator = '/';
   isDark = false;
   items = [
-    { link: 'https://www.aol.com', label: 'Crumb 1', icon: this.icon },
-    { link: 'https://www.yahoo.com', label: 'Crumb 2', icon: this.icon },
-    { link: 'https://www.bing.com', label: 'Crumb 3', icon: this.icon },
+    { link: 'https://www.aol.com', label: 'Crumb 1', icon: this.icon, active: false },
+    { link: 'https://www.yahoo.com', label: 'Crumb 2', icon: this.icon, active: false },
+    { link: 'https://www.bing.com', label: 'Crumb 3', icon: this.icon, active: true },
   ];
 
   i = 4;
 
   insert() {
-    this.items.push({ link: `https://www.google.com`, label: `Crumb ${this.i}`, icon: this.icon });
+    for (const item of this.items) {
+      item.active = false;
+    }
+    this.items.push({ link: `https://www.google.com`, label: `Crumb ${this.i}`, icon: this.icon, active: true });
     this.i++;
   }