preserve query params and provide disable link functionality

projects/xng-breadcrumb/src/lib/breadcrumb-item.directive.ts

@@ -1,5 +1,10 @@
 import { Directive } from '@angular/core';
 
+/**
+ * This directive is used to customize the breadcrumb label behavior
+ * *xngBreadcrumbItem directive can be used in the child element of xng-breadcrumb
+ * Usage: refer to demo app.component.html
+ */
 @Directive({
   selector: '[xngBreadcrumbItem]'
 })

projects/xng-breadcrumb/src/lib/breadcrumb.component.html

@@ -1,6 +1,6 @@
 <nav aria-label="breadcrumb" class="xng-breadcrumb-root" [ngClass]="class">
   <ol class="xng-breadcrumb-list">
-    <ng-container *ngFor="let breadcrumb of breadcrumbs$ | async | autoLabel: autoGenerate; last as isLast; first as isFirst">
+    <ng-container *ngFor="let breadcrumb of breadcrumbs; last as isLast; first as isFirst">
       <li class="xng-breadcrumb-item">
         <a *ngIf="!isLast" [routerLink]="[breadcrumb.routeLink]" class="xng-breadcrumb-link">
           <ng-container

projects/xng-breadcrumb/src/lib/breadcrumb.module.ts

@@ -3,10 +3,9 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BreadcrumbItemDirective } from './breadcrumb-item.directive';
 import { BreadcrumbComponent } from './breadcrumb.component';
-import { AutoLabelPipe } from './auto-label.pipe';
 
 @NgModule({
-  declarations: [BreadcrumbComponent, BreadcrumbItemDirective, AutoLabelPipe],
+  declarations: [BreadcrumbComponent, BreadcrumbItemDirective],
   imports: [CommonModule, RouterModule],
   exports: [BreadcrumbComponent, BreadcrumbItemDirective]
 })

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

@@ -137,7 +137,8 @@ export class BreadcrumbService {
 
     // in case of path param get the resolved for param
     const resolvedPath = this.resolvePathParam(path, activatedRoute);
-    const routeLink = `${routeLinkPrefix}${resolvedPath}`;
+    const queryParamsString = this.resolveQueryParams(activatedRoute);
+    const routeLink = `${routeLinkPrefix}${resolvedPath}${queryParamsString}`;
 
     let { label, alias, skip, info } = this.getFromStore(breadcrumb.alias, routeLink);
     let isAutoGeneratedLabel = false;
@@ -271,6 +272,17 @@ export class BreadcrumbService {
     return path;
   }
 
+  private resolveQueryParams(activatedRoute: ActivatedRoute) {
+    const queryParams = activatedRoute.snapshot.queryParams;
+    let queryParamList = [];
+    if (queryParams) {
+      Object.keys(queryParams).forEach(key => {
+        queryParamList.push(`${key}=${queryParams[key]}`);
+      });
+    }
+    return queryParamList.length > 0 ? `?${queryParamList.join('&')}` : '';
+  }
+
   /**
    * get empty children of a module or Component. Empty child is the one with path: ''
    * When parent and it's children (that has empty route path) define data

projects/xng-breadcrumb/src/lib/breadcrumb.ts

@@ -14,6 +14,11 @@ export interface Breadcrumb {
    * hide or show the breadcrumb item
    */
   skip?: boolean;
+  /**
+   * disable the link for the breadcrumb.
+   * It may be needed when the routing has the path, but navigating to that path is of no use
+   */
+  disable?: boolean;
   /**
    * custom data for each breadcrumb that is passed back to ng-template
    */
@@ -28,6 +33,7 @@ export interface Breadcrumb {
    */
   routeRegex?: string;
   /**
+   * This is additional info on each breadcrumb item whether label is auto generated or user specified
    * isAutoGeneratedLabel has to be present at component level but not at the service,
    * since we may need to support multiple breadcrumb components in same app
    */