Автозаполнение материалов Angular не работает должным образом

Я использую автозаполнение Angular Materials для автозаполнения ключевых слов пользователя для поиска более 2,5 миллионов существующих слов в моей базе данных, я также ограничил функцию поиска отображением результатов автозаполнения только до 4-го символа, несмотря на то, что моя страница блокируется после первого введенный пользователем символ, который мне не кажется логичным (если это была проблема с большими данными, она должна была быть после того, как пользователь набрал 4-й символ) вот мой код машинописного текста:

  control = new FormControl();
  filteredWords: Observable<string[]>;
  url = "./assets/existingwords.txt";
  public  words : string[] =[];

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase().replace(/\s/g, '');
    return this.words.filter(word => word.toLowerCase().replace(/\s/g, '').includes(filterValue));
  }
  ngOnInit() : void  {
    this.filteredWords = this.control.valueChanges.pipe(
        startWith(''),
        map(value => value.length>=4 ? this._filter(value): this.words.slice())
    );
  }

А вот мой HTML-код:

                    <div class = "form-group">
                    <input matInput type = "text" class = "form-control" id = "idWord" [formControl] = "control" [(ngModel)] = "myword" placeholder = "Saisir votre terme ici.." name = "myword" [matAutocomplete] = "auto">
                    <mat-autocomplete #auto = "matAutocomplete">
                        <mat-option *ngFor = "let word of filteredWords | async" [value] = "word">
                          {{word}}
                        </mat-option>
                    </mat-autocomplete>
                    </div>