Google places library widget using js api loader in angular

I am trying to make an address input field using the google places library. I want to use google-js-api-loader instead of a script tag but I can't seem to make it work. Here is my code so far:

address-autocomplete.component.html

<input
  id="autocomplete"
  type="text"
  pInputText
  [(ngModel)]="inputAddress"
  [style]="{ width: '15rem' }"
/>

address-autocomplete.component.ts

import {} from "@angular/google-maps";
import { Loader } from "@googlemaps/js-api-loader";

@Component({
  selector: "app-address-autocomplete",
  templateUrl: "./address-autocomplete.component.html",
  styleUrls: ["./address-autocomplete.component.scss"],
})
export class AddressAutocompleteComponent implements OnInit {
  inputAddress = "London";
  autocomplete!: google.maps.places.Autocomplete;
  constructor() {}

  ngOnInit() {
    const loader = new Loader({
      apiKey: "API_KEY", // 
      version: "weekly",
      libraries: ["places"],
    });
    loader.load().then((google) => {
      this.autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("autocomplete") as HTMLInputElement
      );
      console.log(this.autocomplete);
//Gs {setTypes: function, setComponentRestrictions: function, getPlace: function, getBounds: function, …}
      console.log(this.autocomplete.getPlace());
//undefined
    });
  }
}

I set the initial value of the input filed, however, it still returns undefined even though the autocomplete variable includes the Autocomplete object. I am probably missing something obvious. Thanks in advance. Edit: spelling