Angular Material Autocomplete

angular_material_autocomplete.ts

public buscarCidades(): void {
    this.form.get('genCidadeId').valueChanges.pipe(
        debounceTime(600),
        filter((termo) => typeof termo === 'string'),
        map(termo => termo.toString().trim()),
        distinctUntilChanged(),
        tap(() => this.carregandoCidades = true),
        switchMap(termo => this.cidadeService.getCidadeAutocomplete(0, 50, termo)
            .pipe(
                finalize(() => this.carregandoCidades = false)
            )
        )
    )
    .subscribe(cidades => this.listCidade = cidades.content);
}

<div fxLayout="row wrap" fxLayout.lt-sm="column" fxFlex="1 0 auto">
    <mat-form-field appearance="outline" fxFlex="50" class="pr-8">
        <mat-label>{{ 'pessoa.label.cidade' | translate }}</mat-label>
        <input matInput formControlName="genCidadeId" [matAutocomplete]="autocompleteCidade">
        <mat-icon matSuffix class="secondary-text">search</mat-icon>
        <mat-autocomplete #autocompleteCidade="matAutocomplete" (optionSelected)="selecionouCidade($event)" [displayWith]="displayFn">
            <mat-option *ngIf="carregandoCidades" class="is-loading">
                <mat-spinner diameter="30"></mat-spinner></mat-option>
            <ng-container *ngIf="!carregandoCidades">
                <mat-option *ngFor="let cidade of listCidade" [value]="cidade" [attr.data-genEstadoId]="cidade.genEstadoId">
                    {{ cidade.nmCidade }} - {{ cidade.dsSiglaCidade }}
                </mat-option>
            </ng-container>
        </mat-autocomplete>
    </mat-form-field>