Получите элемент материала classList observable

Question

Я использую mat-autocomplete, и я хочу расфокусировать ввод после выбора элемента без щелчка.Класс mat-focused mat-form-field вызывает фокусировку на mat-auto-complete, удалив его из mat-form-field Я сделал это, но класс mat-focused занимает немного времени, и мне нужно подождать, пока он не установится, чтоЯ могу удалить его, я решил с помощью setTimeout, но я думаю, что это не правильно.Как я могу изменить его на асинхронный или получить асинхронную функцию, обещание, наблюдаемое или ... из материала и не использовать setTimeOut?

Компонент:

export class AutocompleteSimpleExample {
  myControl: FormControl = new FormControl();
  public matForm ;
  constructor(){

  }

  ngOnInit(){
    this.matForm =  document.getElementById("matForm") 
  }
  options = [
    'One',
    'Two',
    'Three'
   ];

  test(option){
    console.log(option)
    setTimeout(function(){
      this.matForm.classList.remove('mat-focused' )}, 100);
  }
}

HTML:

<form class="example-form">
  <mat-form-field class="example-full-width test" #matForm id="matForm">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" #textInput>
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="test($event.option)">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

Я сделал стек-блиц .

Answer 1

Не меняйте класс CSS самостоятельно.Это не то, как работает Angular.

Вместо этого полагайтесь на сам фреймворк: создайте дочерний элемент представления и blur на нем, как показано в this stackblitz :

@ViewChild('textInput') textInput: ElementRef;  
test(option) {
  console.log(option.value)
  setTimeout(() => {
    this.textInput.nativeElement.blur();
  });
}