I am currently working on creating an autofill input for AGM. Everything seems to be going smoothly, but I encountered an error when trying to integrate the component (app-agm-input) into my app.component.html:
https://i.stack.imgur.com/mDtSA.png
Here is a snippet of my component:
import {
Component,
OnInit,
ViewChild,
ElementRef,
NgZone,
Input
} from "@angular/core";
import { MapsAPILoader } from "@agm/core";
import {} from "@types/googlemaps";
@Component({
selector: "app-agm-input",
templateUrl: "./agm-input.component.html",
styles: []
})
export class AgmInputComponent implements OnInit {
@ViewChild("agmInput") public searchElement: ElementRef;
@Input() placeholder: string;
constructor(private mapsAPILoader: MapsAPILoader, private ngZone: NgZone) {}
ngOnInit() {
this.mapsAPILoader.load().then(() => {
let autocomplete = new google.maps.places.Autocomplete(
this.searchElement.nativeElement,
{ types: ["address"] }
);
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
let place: google.maps.places.PlaceResult = autocomplete.getPlace();
if (
place.geometry === undefined ||
place.geometry === null
) {
return;
}
});
});
});
}
}
Below is a glimpse at how my module is set up:
import { NgModule } from "@angular/core";
import { AgmInputComponent } from "./agm-input.component";
import { SharedModule } from "../../shared.module";
import { AgmCoreModule } from "@agm/core";
@NgModule({
imports: [
SharedModule,
AgmCoreModule.forRoot({
apiKey: "**key**",
libraries: ["places"]
})
],
declarations: [AgmInputComponent],
exports: [AgmInputComponent]
})
export class AgmInputModule {}
Please Note: The API key has been removed for review purposes.
This is what my component's HTML file looks like:
<input class="input" type="search" placeholder="{{placeholder}}" autocorrect="off" autocapitalize="off" spellcheck="off" #agmSearch>