diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.ts b/libs/ui/src/lib/holdings-table/holdings-table.component.ts index a72030d17..3efe4804c 100644 --- a/libs/ui/src/lib/holdings-table/holdings-table.component.ts +++ b/libs/ui/src/lib/holdings-table/holdings-table.component.ts @@ -14,6 +14,7 @@ import { OnDestroy, Output, computed, + effect, input, viewChild } from '@angular/core'; @@ -64,13 +65,7 @@ export class GfHoldingsTableComponent implements 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 dataSource = new MatTableDataSource([]); protected readonly displayedColumns = computed(() => { const columns = ['icon', 'nameWithSymbol', 'dateOfFirstActivity']; @@ -97,6 +92,21 @@ export class GfHoldingsTableComponent implements OnDestroy { private readonly unsubscribeSubject = new Subject(); + constructor() { + this.dataSource.sortingDataAccessor = getLowercase; + + // Only runs when data changes + effect(() => { + this.dataSource.data = this.holdings(); + }); + + // Only runs when view changes + effect(() => { + this.dataSource.paginator = this.paginator(); + this.dataSource.sort = this.sort(); + }); + } + public onOpenHoldingDialog({ dataSource, symbol }: AssetProfileIdentifier) { if (this.hasPermissionToOpenDetails()) { this.holdingClicked.emit({ dataSource, symbol }); @@ -107,7 +117,7 @@ export class GfHoldingsTableComponent implements OnDestroy { this.pageSize = Number.MAX_SAFE_INTEGER; setTimeout(() => { - this.dataSource().paginator = this.paginator(); + this.dataSource.paginator = this.paginator(); }); }