diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.component.html b/libs/xng-breadcrumb/src/lib/breadcrumb.component.html
index de907ab..7a8a31b 100644
--- 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
index 355cc2f..600e297 100644
--- a/libs/xng-breadcrumb/src/lib/breadcrumb.component.ts
+++ b/libs/xng-breadcrumb/src/lib/breadcrumb.component.ts
@@ -5,12 +5,12 @@ 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',
@@ -18,9 +18,8 @@ import { BreadcrumbService, BreadcrumbDefinition } from './breadcrumb.service';
   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