From 2c9d1c8a35c02f657bc02e4cbc4da9ebd24d4708 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:26:31 +0700
Subject: [PATCH 01/10] fix(lib): replace null with undefined in activities
 table stories

---
 .../activities-table.component.stories.ts     | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/libs/ui/src/lib/activities-table/activities-table.component.stories.ts b/libs/ui/src/lib/activities-table/activities-table.component.stories.ts
index e7a2ba819..25463e576 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.stories.ts
+++ b/libs/ui/src/lib/activities-table/activities-table.component.stories.ts
@@ -59,7 +59,7 @@ const activities: Activity[] = [
     SymbolProfile: {
       assetClass: 'EQUITY',
       assetSubClass: 'ETF',
-      comment: null,
+      comment: undefined,
       countries: [],
       createdAt: new Date('2021-06-06T16:12:20.982Z'),
       currency: 'USD',
@@ -74,12 +74,12 @@ const activities: Activity[] = [
       isin: 'US9220427424',
       name: 'Vanguard Total World Stock Index Fund ETF Shares',
       updatedAt: new Date('2025-10-01T20:09:39.500Z'),
-      scraperConfiguration: null,
+      scraperConfiguration: undefined,
       sectors: [],
       symbol: 'VT',
       symbolMapping: {},
       url: 'https://www.vanguard.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 267,
       dateOfFirstActivity: new Date('2018-05-31T16:00:00.000Z')
     },
@@ -126,7 +126,7 @@ const activities: Activity[] = [
     SymbolProfile: {
       assetClass: 'EQUITY',
       assetSubClass: 'ETF',
-      comment: null,
+      comment: undefined,
       countries: [],
       createdAt: new Date('2021-06-06T16:12:20.982Z'),
       currency: 'USD',
@@ -141,12 +141,12 @@ const activities: Activity[] = [
       isin: 'US9220427424',
       name: 'Vanguard Total World Stock Index Fund ETF Shares',
       updatedAt: new Date('2025-10-01T20:09:39.500Z'),
-      scraperConfiguration: null,
+      scraperConfiguration: undefined,
       sectors: [],
       symbol: 'VT',
       symbolMapping: {},
       url: 'https://www.vanguard.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 267,
       dateOfFirstActivity: new Date('2018-05-31T16:00:00.000Z')
     },
@@ -193,7 +193,7 @@ const activities: Activity[] = [
     SymbolProfile: {
       assetClass: 'LIQUIDITY',
       assetSubClass: 'CRYPTOCURRENCY',
-      comment: null,
+      comment: undefined,
       countries: [],
       createdAt: new Date('2024-03-12T15:15:21.217Z'),
       currency: 'USD',
@@ -208,12 +208,12 @@ const activities: Activity[] = [
       isin: 'CA4639181029',
       name: 'iShares Bitcoin Trust',
       updatedAt: new Date('2025-09-29T03:14:07.742Z'),
-      scraperConfiguration: null,
+      scraperConfiguration: undefined,
       sectors: [],
       symbol: 'IBIT',
       symbolMapping: {},
       url: 'https://www.ishares.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 6,
       dateOfFirstActivity: new Date('2024-01-01T08:00:00.000Z')
     },
@@ -280,7 +280,7 @@ const activities: Activity[] = [
       symbol: 'BNDW',
       symbolMapping: {},
       url: 'https://vanguard.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 38,
       dateOfFirstActivity: new Date('2022-04-13T20:05:48.742Z')
     },
@@ -327,7 +327,7 @@ const activities: Activity[] = [
     SymbolProfile: {
       assetClass: 'EQUITY',
       assetSubClass: 'ETF',
-      comment: null,
+      comment: undefined,
       countries: [],
       createdAt: new Date('2021-06-06T16:12:20.982Z'),
       currency: 'USD',
@@ -342,12 +342,12 @@ const activities: Activity[] = [
       isin: 'US9220427424',
       name: 'Vanguard Total World Stock Index Fund ETF Shares',
       updatedAt: new Date('2025-10-01T20:09:39.500Z'),
-      scraperConfiguration: null,
+      scraperConfiguration: undefined,
       sectors: [],
       symbol: 'VT',
       symbolMapping: {},
       url: 'https://www.vanguard.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 267,
       dateOfFirstActivity: new Date('2018-05-31T16:00:00.000Z')
     },

From a2dea0cc1e8eec847fab3fae784b818b1ead7fae Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:30:47 +0700
Subject: [PATCH 02/10] feat(lib): implement inject functions in accounts table

---
 .../src/lib/accounts-table/accounts-table.component.ts   | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index 21300fdcc..12a55cc7e 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -81,12 +81,11 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public isLoading = true;
   public routeQueryParams: Subscription;
 
-  private unsubscribeSubject = new Subject<void>();
+  private readonly notificationService = inject(NotificationService);
+  private readonly router = inject(Router);
+  private readonly unsubscribeSubject = new Subject<void>();
 
-  public constructor(
-    private notificationService: NotificationService,
-    private router: Router
-  ) {
+  public constructor() {
     addIcons({
       arrowRedoOutline,
       createOutline,

From f210f842cd58a999e5785dcfeb9d0a956816799f Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:31:15 +0700
Subject: [PATCH 03/10] feat(lib): change to input functions

---
 .../accounts-table.component.html             |  2 +-
 .../accounts-table.component.ts               | 29 ++++++++++---------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.html b/libs/ui/src/lib/accounts-table/accounts-table.component.html
index 68ae78474..56ac5c379 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.html
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.html
@@ -1,4 +1,4 @@
-@if (showActions) {
+@if (showActions()) {
   <div class="d-flex justify-content-end">
     <button
       class="align-items-center d-flex"
diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index 12a55cc7e..fdc6ae6be 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -13,7 +13,9 @@ import {
   OnChanges,
   OnDestroy,
   Output,
-  ViewChild
+  ViewChild,
+  inject,
+  input
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
@@ -60,13 +62,7 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @Input() deviceType: string;
   @Input() hasPermissionToOpenDetails = true;
   @Input() locale = getLocale();
-  @Input() showActions: boolean;
-  @Input() showActivitiesCount = true;
-  @Input() showAllocationInPercentage: boolean;
-  @Input() showBalance = true;
   @Input() showFooter = true;
-  @Input() showValue = true;
-  @Input() showValueInBaseCurrency = true;
   @Input() totalBalanceInBaseCurrency: number;
   @Input() totalValueInBaseCurrency: number;
 
@@ -81,6 +77,13 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public isLoading = true;
   public routeQueryParams: Subscription;
 
+  public readonly showActions = input<boolean>();
+  public readonly showActivitiesCount = input(true);
+  public readonly showAllocationInPercentage = input<boolean>();
+  public readonly showBalance = input(true);
+  public readonly showValue = input(true);
+  public readonly showValueInBaseCurrency = input(false);
+
   private readonly notificationService = inject(NotificationService);
   private readonly router = inject(Router);
   private readonly unsubscribeSubject = new Subject<void>();
@@ -100,31 +103,31 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public ngOnChanges() {
     this.displayedColumns = ['status', 'account', 'platform'];
 
-    if (this.showActivitiesCount) {
+    if (this.showActivitiesCount()) {
       this.displayedColumns.push('activitiesCount');
     }
 
-    if (this.showBalance) {
+    if (this.showBalance()) {
       this.displayedColumns.push('balance');
     }
 
-    if (this.showValue) {
+    if (this.showValue()) {
       this.displayedColumns.push('value');
     }
 
     this.displayedColumns.push('currency');
 
-    if (this.showValueInBaseCurrency) {
+    if (this.showValueInBaseCurrency()) {
       this.displayedColumns.push('valueInBaseCurrency');
     }
 
-    if (this.showAllocationInPercentage) {
+    if (this.showAllocationInPercentage()) {
       this.displayedColumns.push('allocation');
     }
 
     this.displayedColumns.push('comment');
 
-    if (this.showActions) {
+    if (this.showActions()) {
       this.displayedColumns.push('actions');
     }
 

From 0a46225a1c2e21b8c8caff34712584ae8034f3b3 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:34:28 +0700
Subject: [PATCH 04/10] feat(lib): change displayedColumns to a computed field

---
 .../accounts-table.component.html             |  6 +-
 .../accounts-table.component.ts               | 58 ++++++++++---------
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.html b/libs/ui/src/lib/accounts-table/accounts-table.component.html
index 56ac5c379..35850044e 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.html
+++ b/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>
diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index fdc6ae6be..d4721b825 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/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);
-  private readonly router = inject(Router);
-  private readonly unsubscribeSubject = new Subject<void>();
-
-  public constructor() {
-    addIcons({
-      arrowRedoOutline,
-      createOutline,
-      documentTextOutline,
-      ellipsisHorizontal,
-      eyeOffOutline,
-      trashOutline,
-      walletOutline
-    });
-  }
-
-  public ngOnChanges() {
-    this.displayedColumns = ['status', 'account', 'platform'];
+  protected readonly displayedColumns = computed(() => {
+    const columns = ['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);

From 6efe097b0a381fbed97ae2a1046b184c8eac0f92 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:40:22 +0700
Subject: [PATCH 05/10] feat(lib): change accounts to use input function

---
 libs/ui/src/lib/accounts-table/accounts-table.component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index d4721b825..fc9a411bb 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -57,7 +57,6 @@ import { Subject, Subscription } from 'rxjs';
   templateUrl: './accounts-table.component.html'
 })
 export class GfAccountsTableComponent implements OnChanges, OnDestroy {
-  @Input() accounts: Account[];
   @Input() activitiesCount: number;
   @Input() baseCurrency: string;
   @Input() deviceType: string;
@@ -77,6 +76,7 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public isLoading = true;
   public routeQueryParams: Subscription;
 
+  public readonly accounts = input.required<Account[] | undefined>();
   public readonly showActions = input<boolean>();
   public readonly showActivitiesCount = input(true);
   public readonly showAllocationInPercentage = input<boolean>();
@@ -137,12 +137,12 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public ngOnChanges() {
     this.isLoading = true;
 
-    this.dataSource = new MatTableDataSource(this.accounts);
+    this.dataSource = new MatTableDataSource(this.accounts());
     this.dataSource.sortingDataAccessor = getLowercase;
 
     this.dataSource.sort = this.sort;
 
-    if (this.accounts) {
+    if (this.accounts()) {
       this.isLoading = false;
     }
   }

From 3d189b126cd18580752a84a6b0670a205594f511 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:41:43 +0700
Subject: [PATCH 06/10] feat(lib): change isLoading to a computed field

---
 .../src/lib/accounts-table/accounts-table.component.html | 4 ++--
 .../src/lib/accounts-table/accounts-table.component.ts   | 9 ++-------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.html b/libs/ui/src/lib/accounts-table/accounts-table.component.html
index 35850044e..70e8c41bf 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.html
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.html
@@ -348,12 +348,12 @@
     <tr
       *matFooterRowDef="displayedColumns()"
       mat-footer-row
-      [ngClass]="{ 'd-none': isLoading || !showFooter }"
+      [ngClass]="{ 'd-none': isLoading() || !showFooter }"
     ></tr>
   </table>
 </div>
 
-@if (isLoading) {
+@if (isLoading()) {
   <ngx-skeleton-loader
     animation="pulse"
     class="px-4 py-3"
diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index fc9a411bb..dae21e78c 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -73,7 +73,6 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
 
   public dataSource = new MatTableDataSource<Account>();
-  public isLoading = true;
   public routeQueryParams: Subscription;
 
   public readonly accounts = input.required<Account[] | undefined>();
@@ -118,6 +117,8 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
     return columns;
   });
 
+  protected readonly isLoading = computed(() => !this.accounts());
+
   private readonly notificationService = inject(NotificationService);
   private readonly router = inject(Router);
   private readonly unsubscribeSubject = new Subject<void>();
@@ -135,16 +136,10 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   }
 
   public ngOnChanges() {
-    this.isLoading = true;
-
     this.dataSource = new MatTableDataSource(this.accounts());
     this.dataSource.sortingDataAccessor = getLowercase;
 
     this.dataSource.sort = this.sort;
-
-    if (this.accounts()) {
-      this.isLoading = false;
-    }
   }
 
   public onDeleteAccount(aId: string) {

From 3e0064625ff2a9882c48ddf57e1df314a6c32f5b Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:42:52 +0700
Subject: [PATCH 07/10] fix(lib): remove unused routeQueryParams variable

---
 libs/ui/src/lib/accounts-table/accounts-table.component.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index dae21e78c..9e8ad3bb2 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -36,7 +36,7 @@ import {
   walletOutline
 } from 'ionicons/icons';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { Subject, Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -73,7 +73,6 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
 
   public dataSource = new MatTableDataSource<Account>();
-  public routeQueryParams: Subscription;
 
   public readonly accounts = input.required<Account[] | undefined>();
   public readonly showActions = input<boolean>();

From bc57e6f1cc36effe6346d22b1c0603f52f794bc7 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:47:05 +0700
Subject: [PATCH 08/10] feat(lib): change sort to use viewChild function

---
 .../src/lib/accounts-table/accounts-table.component.ts   | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index 9e8ad3bb2..0abf08999 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -13,10 +13,10 @@ import {
   OnChanges,
   OnDestroy,
   Output,
-  ViewChild,
   computed,
   inject,
-  input
+  input,
+  viewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
@@ -70,8 +70,6 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @Output() accountToUpdate = new EventEmitter<Account>();
   @Output() transferBalance = new EventEmitter<void>();
 
-  @ViewChild(MatSort) sort: MatSort;
-
   public dataSource = new MatTableDataSource<Account>();
 
   public readonly accounts = input.required<Account[] | undefined>();
@@ -81,6 +79,7 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public readonly showBalance = input(true);
   public readonly showValue = input(true);
   public readonly showValueInBaseCurrency = input(false);
+  public readonly sort = viewChild.required(MatSort);
 
   protected readonly displayedColumns = computed(() => {
     const columns = ['status', 'account', 'platform'];
@@ -138,7 +137,7 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
     this.dataSource = new MatTableDataSource(this.accounts());
     this.dataSource.sortingDataAccessor = getLowercase;
 
-    this.dataSource.sort = this.sort;
+    this.dataSource.sort = this.sort();
   }
 
   public onDeleteAccount(aId: string) {

From a39d0e35cbf84a0657053f020a1144550a6cc228 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:48:57 +0700
Subject: [PATCH 09/10] feat(lib): change dataSource to a computed field

---
 .../accounts-table/accounts-table.component.html   |  4 ++--
 .../lib/accounts-table/accounts-table.component.ts | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.html b/libs/ui/src/lib/accounts-table/accounts-table.component.html
index 70e8c41bf..63a7a89b6 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.html
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.html
@@ -3,7 +3,7 @@
     <button
       class="align-items-center d-flex"
       mat-stroked-button
-      [disabled]="dataSource?.data.length < 2"
+      [disabled]="dataSource()?.data.length < 2"
       (click)="onTransferBalance()"
     >
       <ion-icon class="mr-2" name="arrow-redo-outline" />
@@ -19,7 +19,7 @@
     matSort
     matSortActive="name"
     matSortDirection="asc"
-    [dataSource]="dataSource"
+    [dataSource]="dataSource()"
   >
     <ng-container matColumnDef="status">
       <th
diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index 0abf08999..2c0008376 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -70,8 +70,6 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @Output() accountToUpdate = new EventEmitter<Account>();
   @Output() transferBalance = new EventEmitter<void>();
 
-  public dataSource = new MatTableDataSource<Account>();
-
   public readonly accounts = input.required<Account[] | undefined>();
   public readonly showActions = input<boolean>();
   public readonly showActivitiesCount = input(true);
@@ -81,6 +79,13 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public readonly showValueInBaseCurrency = input(false);
   public readonly sort = viewChild.required(MatSort);
 
+  protected readonly dataSource = computed(() => {
+    const dataSource = new MatTableDataSource<Account>(this.accounts());
+    dataSource.sortingDataAccessor = getLowercase;
+    dataSource.sort = this.sort();
+    return dataSource;
+  });
+
   protected readonly displayedColumns = computed(() => {
     const columns = ['status', 'account', 'platform'];
 
@@ -134,10 +139,7 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   }
 
   public ngOnChanges() {
-    this.dataSource = new MatTableDataSource(this.accounts());
-    this.dataSource.sortingDataAccessor = getLowercase;
-
-    this.dataSource.sort = this.sort();
+    return;
   }
 
   public onDeleteAccount(aId: string) {

From 949fcd50950ff930674d1f4c0bd0aabb88ee97ca Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:49:24 +0700
Subject: [PATCH 10/10] feat(lib): remove ngOnChanges

---
 libs/ui/src/lib/accounts-table/accounts-table.component.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index 2c0008376..834e33fb3 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -10,7 +10,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnChanges,
   OnDestroy,
   Output,
   computed,
@@ -56,7 +55,7 @@ import { Subject } from 'rxjs';
   styleUrls: ['./accounts-table.component.scss'],
   templateUrl: './accounts-table.component.html'
 })
-export class GfAccountsTableComponent implements OnChanges, OnDestroy {
+export class GfAccountsTableComponent implements OnDestroy {
   @Input() activitiesCount: number;
   @Input() baseCurrency: string;
   @Input() deviceType: string;
@@ -138,10 +137,6 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
     });
   }
 
-  public ngOnChanges() {
-    return;
-  }
-
   public onDeleteAccount(aId: string) {
     this.notificationService.confirm({
       confirmFn: () => {