Selecting a record from a large data set without slowing down the front-end, Angular

Question

I am using an HTML form with an angular front end. I have 20,000 customer records. I initially used an HTML drop-down list, however, it would take around 3 seconds for the form to load. The data is preloaded in the parent component so there is no issue with the backend. I then moved onto auto-fill where I would part type in the customer's name and it would appear, however it would still take around 3 seconds to load. When I remove the drop-down list or the autofill box there is no slow down in the front-end. This tells me that the slowness happens when the data is being rendered into the dropdown or autofill input box and not when the data is loaded into the child component. Is there any other way to allow a user to select a student name from a list of 20,000 without slowing down the front end?

Template

<label class="mr-2">List of Customers</label>
<input type="text" [matAutocomplete]="auto" placeholder="Seach Customer" [formControl]="myControl" 
formControlName="customerName">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
    {{option}}
  </mat-option>
</mat-autocomplete>

Component

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';
import { StateStorageService } from '../_services/stateStorage.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
  myControl = new FormControl();
  customerNameIdList;
  filteredOptions;
  customerNameList: string[] = [];

  constructor(private stateStorageService: StateStorageService) { }

  ngOnInit() {
    // retreive customer names from parent compoenent
    this.customerNameIdList = this.stateStorageService.getCustomersNameId();
    this.customerBox();
  }


  customerBox() {
    let i = 0;
    this.customerNameIdList.forEach(element => {
      this.customerNameList[i] = element.name;
      i = i + 1;
    });

    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.customerNameList.filter(option =>
      option.toLowerCase().includes(filterValue));
  }
}