feat(lib): change displayedColumns to a computed field

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

@@ -336,9 +336,9 @@
       <td *matFooterCellDef class="px-1" mat-footer-cell></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': hasPermissionToOpenDetails
@@ -346,7 +346,7 @@
       (click)="onOpenAccountDetailDialog(row.id)"
     ></tr>
     <tr
-      *matFooterRowDef="displayedColumns"
+      *matFooterRowDef="displayedColumns()"
       mat-footer-row
       [ngClass]="{ 'd-none': isLoading || !showFooter }"
     ></tr>

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

@@ -14,6 +14,7 @@ import {
   OnDestroy,
   Output,
   ViewChild,
+  computed,
   inject,
   input
 } from '@angular/core';
@@ -73,7 +74,6 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
 
   public dataSource = new MatTableDataSource<Account>();
-  public displayedColumns = [];
   public isLoading = true;
   public routeQueryParams: Subscription;
 
@@ -84,53 +84,57 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public readonly showValue = input(true);
   public readonly showValueInBaseCurrency = input(false);
 
-  private readonly notificationService = inject(NotificationService);
+  protected readonly displayedColumns = computed(() => {
-  private readonly router = inject(Router);
+    const columns = ['status', 'account', 'platform'];
-  private readonly unsubscribeSubject = new Subject<void>();
-
-  public constructor() {
-    addIcons({
-      arrowRedoOutline,
-      createOutline,
-      documentTextOutline,
-      ellipsisHorizontal,
-      eyeOffOutline,
-      trashOutline,
-      walletOutline
-    });
-  }
-
-  public ngOnChanges() {
-    this.displayedColumns = ['status', 'account', 'platform'];
 
     if (this.showActivitiesCount()) {
-      this.displayedColumns.push('activitiesCount');
+      columns.push('activitiesCount');
     }
 
     if (this.showBalance()) {
-      this.displayedColumns.push('balance');
+      columns.push('balance');
     }
 
     if (this.showValue()) {
-      this.displayedColumns.push('value');
+      columns.push('value');
     }
 
-    this.displayedColumns.push('currency');
+    columns.push('currency');
 
     if (this.showValueInBaseCurrency()) {
-      this.displayedColumns.push('valueInBaseCurrency');
+      columns.push('valueInBaseCurrency');
     }
 
     if (this.showAllocationInPercentage()) {
-      this.displayedColumns.push('allocation');
+      columns.push('allocation');
     }
 
-    this.displayedColumns.push('comment');
+    columns.push('comment');
 
     if (this.showActions()) {
-      this.displayedColumns.push('actions');
+      columns.push('actions');
     }
 
+    return columns;
+  });
+
+  private readonly notificationService = inject(NotificationService);
+  private readonly router = inject(Router);
+  private readonly unsubscribeSubject = new Subject<void>();
+
+  public constructor() {
+    addIcons({
+      arrowRedoOutline,
+      createOutline,
+      documentTextOutline,
+      ellipsisHorizontal,
+      eyeOffOutline,
+      trashOutline,
+      walletOutline
+    });
+  }
+
+  public ngOnChanges() {
     this.isLoading = true;
 
     this.dataSource = new MatTableDataSource(this.accounts);