Реализовать функцию автозаполнения списка Angular в Angular Material, например выпадающий список автозаполнения

Question

Моя цель - создать окно поиска и список угловых материалов. Когда пользователь вводит значение в поле поиска, элементы списка следует искать на основе поиска (содержит функцию).

На данный момент я сделал раскрывающийся список автозаполнения, но вместо раскрывающегося списка мне нужен список угловых материалов, который в точности совпадает с функцией автозаполнения https://material.angular.io/components/autocomplete/overview Мне нужна та же функциональность в списке угловых материалов.

HTML:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria - label="Number" matInput[formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption# auto="matAutocomplete">
      <mat-option * ngFor="let option of filteredOptions | async" [value]="option"> {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

TS.file:

import {
 Component,
 OnInit
} from '@angular/core';
import {
 FormControl
} from '@angular/forms';
import {
 Observable
} from 'rxjs';
import {
 map,
 startWith
} from 'rxjs/operators';

/**
 * @title Highlight the first autocomplete option
 */
@Component({
 selector: 'autocomplete-auto-active-first-option-example',
 templateUrl: 'autocomplete-auto-active-first-option-example.html',
 styleUrls: ['autocomplete-auto-active-first-option-example.css'],
})
export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
 myControl = new FormControl();
 options: string[] = ['admin', 'manager', 'customer'];
 filteredOptions: Observable < string[] > ;

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

 private _filter(value: string): string[] {
  const filterValue = value.toLowerCase();

  return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
 }
} 

CSS:

.example - form {
  min - width: 150 px;
  max - width: 500 px;
  width: 100 % ;
}

.example - full - width {
  width: 100 % ;
}