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 1dc6f59b0..2b4cdc371 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
@@ -16,7 +16,8 @@ import {
   OnChanges,
   OnInit,
   SimpleChanges,
-  ViewChild
+  ViewChild,
+  viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
@@ -83,15 +84,16 @@ export class GfSymbolAutocompleteComponent
   @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 })[] = [];
 
+  protected readonly symbolAutocomplete =
+    viewChild.required<MatAutocomplete>('symbolAutocomplete');
+
   private readonly destroyRef = inject(DestroyRef);
 
   public constructor(