From 9310466c7ab957e4e44b818c8e11db1c22c1806b Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sat, 14 Mar 2026 17:11:23 +0700
Subject: [PATCH] Task/improve type safety of holdings table component (#6556)

* Improve type safety
---
 .../holdings-table.component.html             |  4 ++--
 .../holdings-table.component.ts               | 21 +++++++++----------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index 250eff578..3bb387ae4 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html
@@ -193,7 +193,7 @@
   </table>
 </div>
 
-<mat-paginator class="d-none" [pageSize]="pageSize" />
+<mat-paginator class="d-none" [pageSize]="pageSize()" />
 
 @if (isLoading()) {
   <ngx-skeleton-loader
@@ -206,7 +206,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>
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 bea555a0b..cc1a248e8 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.ts
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.ts
@@ -9,12 +9,11 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Input,
-  Output,
   computed,
   effect,
   input,
+  model,
+  output,
   viewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -47,17 +46,17 @@ import { GfValueComponent } from '../value/value.component';
   templateUrl: './holdings-table.component.html'
 })
 export class GfHoldingsTableComponent {
-  @Input() pageSize = Number.MAX_SAFE_INTEGER;
-
-  @Output() holdingClicked = new EventEmitter<AssetProfileIdentifier>();
-
   public readonly hasPermissionToOpenDetails = input(true);
   public readonly hasPermissionToShowQuantities = input(true);
   public readonly hasPermissionToShowValues = input(true);
   public readonly holdings = input.required<PortfolioPosition[]>();
   public readonly locale = input(getLocale());
-  public readonly paginator = viewChild.required(MatPaginator);
-  public readonly sort = viewChild.required(MatSort);
+  public readonly pageSize = model(Number.MAX_SAFE_INTEGER);
+
+  public readonly holdingClicked = output<AssetProfileIdentifier>();
+
+  protected readonly paginator = viewChild.required(MatPaginator);
+  protected readonly sort = viewChild.required(MatSort);
 
   protected readonly dataSource = new MatTableDataSource<PortfolioPosition>([]);
 
@@ -106,7 +105,7 @@ export class GfHoldingsTableComponent {
   protected canShowDetails(holding: PortfolioPosition): boolean {
     return (
       this.hasPermissionToOpenDetails() &&
-      !this.ignoreAssetSubClasses.includes(holding.assetSubClass)
+      !this.ignoreAssetSubClasses.includes(holding.assetProfile.assetSubClass)
     );
   }
 
@@ -118,7 +117,7 @@ export class GfHoldingsTableComponent {
   }
 
   protected onShowAllHoldings() {
-    this.pageSize = Number.MAX_SAFE_INTEGER;
+    this.pageSize.set(Number.MAX_SAFE_INTEGER);
 
     setTimeout(() => {
       this.dataSource.paginator = this.paginator();