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))