Angular 7 + AGM + Auto Complete Address (Material Angular)

address-autocomplete.component.html

<mat-form-field class="w-full" appearance="outline">
  <mat-label>Localize sua empresa no mapa</mat-label>
  <input type="text" placeholder="Procure pelo nome da empresa ou endereço" matInput [formControl]="searchInput" [matAutocomplete]="auto">
  <mat-icon matSuffix>place</mat-icon>
  <mat-hint>Ao selecionar, ajuste o ponto no mapa se necessário</mat-hint>
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onChangeAddress($event)">
    <mat-option class="address-option" *ngFor="let option of options" [value]="option">
      <mat-icon matSuffix>place</mat-icon>
      <span class="place">{{option.structured_formatting.main_text}}</span>
      <small class="address">{{option.structured_formatting.secondary_text}}</small>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

address-autocomplete.component.scss

mat-option.address-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .mat-option-text {
    display: flex;
    align-items: center;
  }
  .place {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .address {
    white-space: nowrap;
    color: #999;
  }
}

address.autocomplete.component.ts

import { Component, OnInit, Output, EventEmitter, NgZone } from '@angular/core';
import { Place } from 'src/app/core';
import { MapsAPILoader } from '@agm/core';
import { FormControl } from '@angular/forms';
import { of } from 'rxjs';
import { merge, filter, debounceTime } from 'rxjs/operators';
import { MatAutocompleteSelectedEvent } from '@angular/material';

export interface Address {
  id: string;
  description: string;
  place_id?: string;
  structured_formatting?: any;
  terms?: any[];
  types?: string[];
}
@Component({
  selector: 'address-autocomplete',
  templateUrl: './address-autocomplete.component.html',
  styleUrls: ['./address-autocomplete.component.scss']
})
export class AddressAutocompleteComponent implements OnInit {
  @Output() addressChanged = new EventEmitter<Place|{}>();
  searchInput = new FormControl();
  acService: any;
  options: any[];
  inputText$ = of([])
    .pipe(
      merge(this.searchInput.valueChanges),
      filter(v => v.length > 8),
      debounceTime(300)
    );

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone,
  ) { }

  queryAddress(input: string) {
    this.acService.getQueryPredictions({input}, (result: Address[]) => {
      this.ngZone.run(() => this.options = result);
    })
  }
  displayFn(address?: Address): string | undefined {
    return address ? address.description : undefined;
  }
  onChangeAddress(selected: MatAutocompleteSelectedEvent) {
    this.addressChanged.emit(this.searchInput.value);
  }
  ngOnInit() {
    this.mapsAPILoader.load().then(() => {
      this.acService = new google.maps.places.AutocompleteService();
      this.inputText$.subscribe((res: string) => this.queryAddress(res));
    });
  }
}