fix: change breadcrumb array to observable with pipe async (#75)

Co-authored-by: AFELIO\a.thiry <[email protected]> Change the way the breadcrumb array is handled by using a pipe async instead of a subscribe. Closes #74
udayvunnam · Feb 25, 2021 · fb05322 · fb05322
1 parent f63924f
commit fb05322
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.component.html b/libs/xng-breadcrumb/src/lib/breadcrumb.component.html
@@ -2,7 +2,7 @@
   <ol class="xng-breadcrumb-list">
     <ng-container
       *ngFor="
-        let breadcrumb of breadcrumbs;
+        let breadcrumb of breadcrumbs$ | async;
         last as isLast;
         first as isFirst;
         index as index;

diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.component.ts b/libs/xng-breadcrumb/src/lib/breadcrumb.component.ts
@@ -5,22 +5,21 @@ import {
   OnInit,
   TemplateRef,
   ViewEncapsulation,
-  OnDestroy,
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { BreadcrumbItemDirective } from './breadcrumb-item.directive';
-import { BreadcrumbService, BreadcrumbDefinition } from './breadcrumb.service';
+import { BreadcrumbDefinition, BreadcrumbService } from './breadcrumb.service';
 
 @Component({
   selector: 'xng-breadcrumb',
   templateUrl: './breadcrumb.component.html',
   styleUrls: ['./breadcrumb.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class BreadcrumbComponent implements OnInit, OnDestroy {
+export class BreadcrumbComponent implements OnInit {
   subscription: Subscription;
-  breadcrumbs: BreadcrumbDefinition[];
   breadcrumbs$: Observable<BreadcrumbDefinition[]>;
   separatorTemplate: TemplateRef<void>;
   private _separator = '/';
@@ -87,10 +86,18 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.subscription = this.breadcrumbService.breadcrumbs$.subscribe(
-      (breadcrumbs) => {
-        this.breadcrumbs = breadcrumbs
-          .map((breadcrumb) => {
+    this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$.pipe(
+      map((breadcrumbs: BreadcrumbDefinition[]) => {
+        return breadcrumbs
+          .filter((breadcrumb: BreadcrumbDefinition) => {
+            // Usually, breadcrumb list can contain a combination of auto generated and user specified labels
+            // this filters autogenerated labels in case of "[autoGenerate]: false"
+            if (this.autoGenerate) {
+              return true;
+            }
+            return !breadcrumb.isAutoGeneratedLabel;
+          })
+          .map((breadcrumb: BreadcrumbDefinition) => {
             // Do not mutate breadcrumb as its source of truth.
             // There can be scenarios where we can have multiple xng-breadcrumb instances in page
             return {
@@ -100,21 +107,10 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
                 : undefined,
               fragment: this.preserveFragment ? breadcrumb.fragment : undefined,
             };
-          })
-          .filter((breadcrumb) => {
-            // Usually, breadcrumb list can contain a combination of auto generated and user specified labels
-            // this filters autogenerated labels in case of "[autoGenerate]: false"
-            if (this.autoGenerate) {
-              return true;
-            }
-            return !breadcrumb.isAutoGeneratedLabel;
           });
-      }
+      })
     );
   }
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
 
   handleRoute(breadcrumb: BreadcrumbDefinition) {
     const routeLink = breadcrumb.routeInterceptor