feat(lib): make displayedColumns a computed signal

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -177,9 +177,9 @@
       </td>
     </ng-container>
 
-    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matHeaderRowDef="displayedColumns()" mat-header-row></tr>
     <tr
-      *matRowDef="let row; columns: displayedColumns"
+      *matRowDef="let row; columns: displayedColumns()"
       mat-row
       [ngClass]="{
         'cursor-pointer':

libs/ui/src/lib/holdings-table/holdings-table.component.ts

@@ -56,7 +56,6 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
 
   @Output() holdingClicked = new EventEmitter<AssetProfileIdentifier>();
 
-  public displayedColumns: string[] = [];
   public ignoreAssetSubClasses = [AssetSubClass.CASH];
   public routeQueryParams: Subscription;
 
@@ -75,28 +74,33 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
     return dataSource;
   });
 
-  protected readonly isLoading = computed(() => !this.holdings());
+  protected readonly displayedColumns = computed(() => {
-
+    const columns = ['icon', 'nameWithSymbol', 'dateOfFirstActivity'];
-  private readonly unsubscribeSubject = new Subject<void>();
-
-  public ngOnChanges() {
-    this.displayedColumns = ['icon', 'nameWithSymbol', 'dateOfFirstActivity'];
 
     if (this.hasPermissionToShowQuantities()) {
-      this.displayedColumns.push('quantity');
+      columns.push('quantity');
     }
 
     if (this.hasPermissionToShowValues()) {
-      this.displayedColumns.push('valueInBaseCurrency');
+      columns.push('valueInBaseCurrency');
     }
 
-    this.displayedColumns.push('allocationInPercentage');
+    columns.push('allocationInPercentage');
 
     if (this.hasPermissionToShowValues()) {
-      this.displayedColumns.push('performance');
+      columns.push('performance');
     }
 
-    this.displayedColumns.push('performanceInPercentage');
+    columns.push('performanceInPercentage');
+    return columns;
+  });
+
+  protected readonly isLoading = computed(() => !this.holdings());
+
+  private readonly unsubscribeSubject = new Subject<void>();
+
+  public ngOnChanges() {
+    return;
   }
 
   public onOpenHoldingDialog({ dataSource, symbol }: AssetProfileIdentifier) {