Angular 6 asynchronous autocomplete not working but it displaying items without changing value - autocomplete

Question

Angular 6 asynchronous autocomplete is not working but it displays items without changing value and does not reduce the list of proposed values
component.ts:
import { Component, OnInit } from '#angular/core';
import { FormGroup, FormBuilder, Validators,FormControl} from '#angular/forms'
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
export class AjouterMarcheComponent implements OnInit {
createForm: FormGroup;
myControl : FormControl;
directions: string[] = ['DGI','SSI','TTU','BLI'];
filteredDirections: Observable<string[]>;
constructor(private fb: FormBuilder) {
this.createForm = this.fb.group({
NomDirection: ['', Validators.required]})
this.myControl= new FormControl();
});
}
ngOnInit() {
this.filteredDirections = this.myControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase(); //miniscule
return this.directions.filter(direction => `direction.toLowerCase().indexOf(filterValue) === 0);
}
}
Thanks for your help

Answer 1

Compoment.html
compoment.html
<div>
<br>
<mat-card>
<br>
<form [formGroup]="createForm" class="create-form" >
<mat-form-field class="field-full-width">
<input placeholder="Choisir ou ajouter une direction" type="text" aria-label="Number" [formControl]="myControl" matInput [matAutocomplete]="auto" #NomDirection>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
</mat-card>
</div>