From 3cc2bae7697671fef05dac374e75d8f414abe23c Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Tue, 27 Jul 2021 17:19:55 -0700
Subject: [PATCH] fix: issue with async nav lists not updating correctly

---
 .../src/navigation/navigation-list.component.ts      | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts
index 0acfeaf7d..d68af073f 100644
--- a/projects/components/src/navigation/navigation-list.component.ts
+++ b/projects/components/src/navigation/navigation-list.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
 import { Color, NavigationService } from '@hypertrace/common';
@@ -25,7 +25,7 @@ import { IconSize } from '../icon/icon-size';
             <hr *ngSwitchCase="'${NavItemType.Divider}'" class="nav-divider" />
 
             <ng-container *ngSwitchCase="'${NavItemType.Link}'">
-              <ht-nav-item [config]="item" [active]="item === activeItem" [collapsed]="this.collapsed"> </ht-nav-item>
+              <ht-nav-item [config]="item" [active]="item === activeItem" [collapsed]="this.collapsed"></ht-nav-item>
             </ng-container>
           </ng-container>
         </ng-container>
@@ -48,7 +48,7 @@ import { IconSize } from '../icon/icon-size';
     </nav>
   `
 })
-export class NavigationListComponent {
+export class NavigationListComponent implements OnChanges {
   @Input()
   public navItems: NavItemConfig[] = [];
 
@@ -64,12 +64,14 @@ export class NavigationListComponent {
   @Output()
   public readonly collapsedChange: EventEmitter<boolean> = new EventEmitter();
 
-  public readonly activeItem$: Observable<NavItemLinkConfig | undefined>;
+  public activeItem$?: Observable<NavItemLinkConfig | undefined>;
 
   public constructor(
     private readonly navigationService: NavigationService,
     private readonly activatedRoute: ActivatedRoute
-  ) {
+  ) {}
+
+  public ngOnChanges(): void {
     this.activeItem$ = this.navigationService.navigation$.pipe(
       startWith(this.navigationService.getCurrentActivatedRoute()),
       map(() => this.findActiveItem(this.navItems))