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';
-
+
@@ -48,7 +48,7 @@ import { IconSize } from '../icon/icon-size';
`
})
-export class NavigationListComponent {
+export class NavigationListComponent implements OnChanges {
@Input()
public navItems: NavItemConfig[] = [];
@@ -64,12 +64,14 @@ export class NavigationListComponent {
@Output()
public readonly collapsedChange: EventEmitter = new EventEmitter();
- public readonly activeItem$: Observable;
+ public activeItem$?: Observable;
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))