fix: change autogenerated to false on dynamically setting a label (#101)

apps/simple-demo-e2e/src/integration/app.spec.ts

@@ -1,17 +1,35 @@
 describe('simple-demo', () => {
-  it('should contain breadcrumbs for books', () => {
+  it('should show breadcrumbs within ngIf', () => {
     cy.visit('/');
     // initially within ngIf and not shown
     cy.get('xng-breadcrumb').should('not.exist');
     cy.get('button').contains('Toggle Breadcrumb Visibility').click();
     cy.get('xng-breadcrumb').contains('Dashboard');
+  });
 
+  it("shouldn't have default seperator if Home breadcrumb is not defined", () => {
     // shouldn't have default seperator if Home breadcrumb is not defined
     cy.get('.xng-breadcrumb-list').contains('/').should('not.exist');
-    cy.get('a').contains('Order Details').click();
+  });
 
-    // Should show breadcrumbs when routeReuseStrategy is false
+  it('should show breadcrumbs when routeReuseStrategy is false', () => {
+    // Dashboard and Order Details use same component and routeReuseStrategy false still should get data
+    cy.get('a').contains('Order Details').click();
     cy.get('.xng-breadcrumb-list').contains('Order Details').should('exist');
     cy.get('.xng-breadcrumb-list').contains('Company Name').should('exist');
   });
+
+  it('should show breadcrumbs if dynamically set with autoGenerate false', () => {
+    cy.get('a').contains('Order Items').click();
+    cy.get('.auto-generated-true .xng-breadcrumb-list')
+      .contains('items')
+      .should('exist');
+    cy.get('.auto-generated-false .xng-breadcrumb-list')
+      .contains('items')
+      .should('not.exist');
+    cy.get('button').contains('Set Order Items Label').click();
+    cy.get('.auto-generated-false .xng-breadcrumb-list')
+      .contains('My Order Items')
+      .should('exist');
+  });
 });

apps/simple-demo/src/app/app.component.html

@@ -1,12 +1,20 @@
-<h2>xng-breadcrumb</h2>
+<h1>xng-breadcrumb</h1>
 <h2>Angular version {{ name }}</h2>
 
 <div *ngIf="showBreadcrumbs">
-  <xng-breadcrumb></xng-breadcrumb>
+  <xng-breadcrumb class="auto-generated-true"></xng-breadcrumb>
+
+  <h3>Auto generated: false</h3>
+  <xng-breadcrumb
+    [autoGenerate]="false"
+    class="auto-generated-false"
+  ></xng-breadcrumb>
 </div>
 
 <router-outlet></router-outlet>
 
 <button (click)="toggleBreadcrumbVisibility()">
   Toggle Breadcrumb Visibility
 </button>
+
+<button (click)="setOrderItemsLabel()">Set Order Items Label</button>

apps/simple-demo/src/app/app.component.ts

@@ -1,3 +1,4 @@
+import { BreadcrumbService } from '@xng/xng-breadcrumb';
 import { Component, VERSION } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -9,13 +10,17 @@ import { Router } from '@angular/router';
 export class AppComponent {
   showBreadcrumbs = false;
 
-  constructor(router: Router) {
+  constructor(router: Router, private breadcrumbService: BreadcrumbService) {
     router.routeReuseStrategy.shouldReuseRoute = () => false;
   }
 
   toggleBreadcrumbVisibility() {
     this.showBreadcrumbs = !this.showBreadcrumbs;
   }
 
+  setOrderItemsLabel() {
+    this.breadcrumbService.set('@orderItems', { label: 'My Order Items' });
+  }
+
   name = 'Angular ' + VERSION.major;
 }

apps/simple-demo/src/app/app.routing.module.ts

@@ -1,4 +1,3 @@
-import { AppComponent } from './app.component';
 import { PageComponent } from './page.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
@@ -39,7 +38,11 @@ export const appRoutes: Routes = [
                   {
                     path: 'items',
                     component: PageComponent,
-                    data: { breadcrumb: 'Items' },
+                    data: {
+                      breadcrumb: {
+                        alias: 'orderItems',
+                      },
+                    },
                   },
                   {
                     path: 'payment',

libs/xng-breadcrumb/src/lib/breadcrumb.service.ts

@@ -322,6 +322,11 @@ export class BreadcrumbService {
         { ...breadcrumbObject, routeLink: this.ensureLeadingSlash(key) },
       ];
     }
+
+    // For this route if previously a breadcrumb is not defined that sets isAutoGeneratedLabel: true
+    // change it to false since this is user supplied value
+    updateArgs[1].isAutoGeneratedLabel = false;
+
     this.updateStore(...updateArgs);
     this.updateCurrentBreadcrumbs(...updateArgs);
   }