From 4dabd8ae68adcffeae4c142ef62439f77d822868 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Thu, 12 Mar 2026 02:07:32 +0700
Subject: [PATCH] Task/improve type safety in symbol autocomplete (#6498)

* Improve type safety in symbol autocomplete
---
 .../lib/interfaces/lookup-item.interface.ts   |  2 +-
 .../symbol-autocomplete.component.ts          | 61 +++++++++----------
 2 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/libs/common/src/lib/interfaces/lookup-item.interface.ts b/libs/common/src/lib/interfaces/lookup-item.interface.ts
index fa91ed690..6cedeca09 100644
--- a/libs/common/src/lib/interfaces/lookup-item.interface.ts
+++ b/libs/common/src/lib/interfaces/lookup-item.interface.ts
@@ -7,7 +7,7 @@ export interface LookupItem {
   assetSubClass: AssetSubClass;
   currency: string;
   dataProviderInfo: DataProviderInfo;
-  dataSource: DataSource;
+  dataSource: DataSource | null;
   name: string;
   symbol: string;
 }
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
index c74e8a077..4b1898b8a 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
@@ -8,15 +8,17 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   DoCheck,
   ElementRef,
   Input,
   OnChanges,
-  OnDestroy,
   OnInit,
   SimpleChanges,
-  ViewChild
+  inject,
+  viewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   FormControl,
   FormsModule,
@@ -35,13 +37,12 @@ import {
 import { MatInput, MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { isString } from 'lodash';
-import { Subject, tap } from 'rxjs';
+import { tap } from 'rxjs';
 import {
   debounceTime,
   distinctUntilChanged,
   filter,
-  switchMap,
-  takeUntil
+  switchMap
 } from 'rxjs/operators';
 
 import { translate } from '../i18n';
@@ -77,21 +78,21 @@ import { AbstractMatFormField } from '../shared/abstract-mat-form-field';
 })
 export class GfSymbolAutocompleteComponent
   extends AbstractMatFormField<LookupItem>
-  implements DoCheck, OnChanges, OnDestroy, OnInit
+  implements DoCheck, OnChanges, OnInit
 {
   @Input() public defaultLookupItems: LookupItem[] = [];
   @Input() public isLoading = false;
 
-  @ViewChild('symbolAutocomplete') public symbolAutocomplete: MatAutocomplete;
-
   @Input() private includeIndices = false;
 
-  @ViewChild(MatInput) private input: MatInput;
-
-  public control = new FormControl();
+  public readonly control = new FormControl();
   public lookupItems: (LookupItem & { assetSubClassString: string })[] = [];
 
-  private unsubscribeSubject = new Subject<void>();
+  protected readonly symbolAutocomplete =
+    viewChild.required<MatAutocomplete>('symbolAutocomplete');
+
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly input = viewChild.required(MatInput);
 
   public constructor(
     public readonly _elementRef: ElementRef,
@@ -105,13 +106,22 @@ export class GfSymbolAutocompleteComponent
     this.controlType = 'symbol-autocomplete';
   }
 
+  public get empty() {
+    return this.input().empty;
+  }
+
+  public set value(value: LookupItem) {
+    this.control.setValue(value);
+    super.value = value;
+  }
+
   public ngOnInit() {
     if (this.disabled) {
       this.control.disable();
     }
 
     this.control.valueChanges
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         if (super.value) {
           super.value.dataSource = null;
@@ -136,7 +146,7 @@ export class GfSymbolAutocompleteComponent
         }),
         debounceTime(400),
         distinctUntilChanged(),
-        takeUntil(this.unsubscribeSubject),
+        takeUntilDestroyed(this.destroyRef),
         switchMap((query: string) => {
           return this.dataService.fetchSymbols({
             query,
@@ -168,12 +178,8 @@ export class GfSymbolAutocompleteComponent
     return aLookupItem?.symbol ?? '';
   }
 
-  public get empty() {
-    return this.input?.empty;
-  }
-
   public focus() {
-    this.input.focus();
+    this.input().focus();
   }
 
   public isValueInOptions(value: string) {
@@ -185,7 +191,7 @@ export class GfSymbolAutocompleteComponent
   public ngDoCheck() {
     if (this.ngControl) {
       this.validateRequired();
-      this.errorState = this.ngControl.invalid && this.ngControl.touched;
+      this.errorState = !!(this.ngControl.invalid && this.ngControl.touched);
       this.stateChanges.next();
     }
   }
@@ -197,18 +203,6 @@ export class GfSymbolAutocompleteComponent
     } as LookupItem;
   }
 
-  public set value(value: LookupItem) {
-    this.control.setValue(value);
-    super.value = value;
-  }
-
-  public ngOnDestroy() {
-    super.ngOnDestroy();
-
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private showDefaultOptions() {
     this.lookupItems = this.defaultLookupItems.map((lookupItem) => {
       return {
@@ -224,8 +218,9 @@ export class GfSymbolAutocompleteComponent
     const requiredCheck = super.required
       ? !super.value?.dataSource || !super.value?.symbol
       : false;
+
     if (requiredCheck) {
-      this.ngControl.control.setErrors({ invalidData: true });
+      this.ngControl.control?.setErrors({ invalidData: true });
     }
   }
 }