From 3931fb13f06760144348008e9af3d766858874af Mon Sep 17 00:00:00 2001
From: Adithya Sreyaj <adi.sreyaj@gmail.com>
Date: Fri, 4 Feb 2022 18:30:32 +0530
Subject: [PATCH 1/3] feat(navigable-tab): add change detection trigger

When tabs are dynamically added or removed change detection will now be automatically triggered.
---
 .../src/tabs/navigable/navigable-tab-group.component.ts       | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
index 8b0150a44..93cc35665 100644
--- a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
@@ -49,6 +49,10 @@ import { NavigableTabComponent } from './navigable-tab.component';
       </nav>
       <div class="divider"></div>
     </div>
+
+    <!-- When tabs input changes, change detection will be triggered automatically -->
+    <ng-container *ngIf="tabs.changes | async"></ng-container>
+
   `
 })
 export class NavigableTabGroupComponent implements AfterContentInit {

From f48ef9cc4b1b29a71d884891d5c9a75b97b033f7 Mon Sep 17 00:00:00 2001
From: Adithya Sreyaj <adithya.sreyaj@traceable.ai>
Date: Tue, 8 Feb 2022 11:19:45 +0530
Subject: [PATCH 2/3] refactor(navigable-tab): update change detection trigger
 mechanism

---
 .../navigable/navigable-tab-group.component.ts   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
index 93cc35665..2114ede17 100644
--- a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
+++ b/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
@@ -52,17 +59,17 @@ import { NavigableTabComponent } from './navigable-tab.component';
 
     <!-- When tabs input changes, change detection will be triggered automatically -->
     <ng-container *ngIf="tabs.changes | async"></ng-container>
-
   `
 })
 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,
@@ -70,6 +77,7 @@ export class NavigableTabGroupComponent implements AfterContentInit {
   ) {}
 
   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()),

From 3441dc136836d5491dd62cefc3ffa8db60b383b4 Mon Sep 17 00:00:00 2001
From: Adithya Sreyaj <adithya.sreyaj@traceable.ai>
Date: Tue, 8 Feb 2022 13:36:35 +0530
Subject: [PATCH 3/3] refactor(navigable-tab): remove unused code

---
 .../src/tabs/navigable/navigable-tab-group.component.ts        | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
index 2114ede17..2c03e3d31 100644
--- a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
@@ -56,9 +56,6 @@ import { NavigableTabComponent } from './navigable-tab.component';
       </nav>
       <div class="divider"></div>
     </div>
-
-    <!-- When tabs input changes, change detection will be triggered automatically -->
-    <ng-container *ngIf="tabs.changes | async"></ng-container>
   `
 })
 export class NavigableTabGroupComponent implements AfterContentInit {