feat(navigable-tab): add change detection trigger (#1410)

* feat(navigable-tab): add change detection trigger

When tabs are dynamically added or removed change detection will now be automatically triggered.

* refactor(navigable-tab): update change detection trigger mechanism

* refactor(navigable-tab): remove unused code

Author: adisreyaj

projects/components/src/tabs/navigable/navigable-tab-group.component.ts

@@ -8,7 +8,14 @@ import {
   QueryList
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Color, FeatureState, NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
+import {
+  Color,
+  FeatureState,
+  NavigationParams,
+  NavigationParamsType,
+  NavigationService,
+  queryListAndChanges$
+} from '@hypertrace/common';
 import { merge, Observable } from 'rxjs';
 import { distinctUntilChanged, map, startWith, tap } from 'rxjs/operators';
 import { NavigableTabComponent } from './navigable-tab.component';
@@ -20,7 +27,7 @@ import { NavigableTabComponent } from './navigable-tab.component';
   template: `
     <div class="tab-group">
       <nav mat-tab-nav-bar *htLetAsync="this.activeTab$ as activeTab" disableRipple>
-        <ng-container *ngFor="let tab of this.tabs">
+        <ng-container *ngFor="let tab of this.tabs$ | async">
           <ng-container *ngIf="!tab.hidden">
             <div class="tab-button" *htIfFeature="tab.featureFlags | htFeature as featureState">
               <ht-link
@@ -53,19 +60,21 @@ import { NavigableTabComponent } from './navigable-tab.component';
 })
 export class NavigableTabGroupComponent implements AfterContentInit {
   @ContentChildren(NavigableTabComponent)
-  public tabs!: QueryList<NavigableTabComponent>;
+  private readonly tabs!: QueryList<NavigableTabComponent>;
 
   @Output()
   public readonly tabChange: EventEmitter<string | undefined> = new EventEmitter<string | undefined>();
 
   public activeTab$?: Observable<NavigableTabComponent | undefined>;
+  public tabs$!: Observable<NavigableTabComponent[]>;
 
   public constructor(
     public readonly navigationService: NavigationService,
     private readonly activatedRoute: ActivatedRoute
   ) {}
 
   public ngAfterContentInit(): void {
+    this.tabs$ = queryListAndChanges$(this.tabs).pipe(map(list => list.toArray()));
     this.activeTab$ = merge(this.navigationService.navigation$, this.tabs.changes).pipe(
       startWith(undefined),
       map(() => this.findActiveTab()),