feat(lib): make dataSource a computed signal

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

@@ -5,7 +5,7 @@
     matSort
     matSortActive="allocationInPercentage"
     matSortDirection="desc"
-    [dataSource]="dataSource"
+    [dataSource]="dataSource()"
   >
     <ng-container matColumnDef="icon" sticky>
       <th *matHeaderCellDef class="px-1" mat-header-cell></th>
@@ -210,7 +210,7 @@
   />
 }
 
-@if (dataSource.data.length > pageSize && !isLoading) {
+@if (dataSource().data.length > pageSize && !isLoading) {
   <div class="my-3 text-center">
     <button mat-stroked-button (click)="onShowAllHoldings()">
       <ng-container i18n>Show all</ng-container>

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

@@ -59,7 +59,6 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
 
   @Output() holdingClicked = new EventEmitter<AssetProfileIdentifier>();
 
-  public dataSource = new MatTableDataSource<PortfolioPosition>();
   public displayedColumns: string[] = [];
   public ignoreAssetSubClasses = [AssetSubClass.CASH];
   public routeQueryParams: Subscription;
@@ -68,6 +67,14 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
   public readonly paginator = viewChild.required(MatPaginator);
   public readonly sort = viewChild.required(MatSort);
 
+  protected readonly dataSource = computed(() => {
+    const dataSource = new MatTableDataSource(this.holdings());
+    dataSource.paginator = this.paginator();
+    dataSource.sortingDataAccessor = getLowercase;
+    dataSource.sort = this.sort();
+    return dataSource;
+  });
+
   protected readonly isLoading = computed(() => !this.holdings());
 
   private readonly unsubscribeSubject = new Subject<void>();
@@ -90,12 +97,6 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
     }
 
     this.displayedColumns.push('performanceInPercentage');
-
-    this.dataSource = new MatTableDataSource(this.holdings());
-    this.dataSource.paginator = this.paginator();
-    this.dataSource.sortingDataAccessor = getLowercase;
-
-    this.dataSource.sort = this.sort();
   }
 
   public onOpenHoldingDialog({ dataSource, symbol }: AssetProfileIdentifier) {
@@ -108,7 +109,7 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
     this.pageSize = Number.MAX_SAFE_INTEGER;
 
     setTimeout(() => {
-      this.dataSource.paginator = this.paginator();
+      this.dataSource().paginator = this.paginator();
     });
   }