Im trying to use ngx-google-places-autocomplete library to give place auto completion in my input field. I have set it up in my angular project following steps as below.
- Running
npm install ngx-google-places-autocomplete - Adding script with api key to
index.htmlfile
<script src="https://maps.googleapis.com/maps/api/js?key=<KEY>&libraries=places&language=en"></script>
Adding
GooglePlaceModuletoapp.module.tsfileAdding directive to the input field which is inside a modal
<ng-template #interpretersModal let-modal> <div class="modal-header"> <h4 class="modal-title" id="modal-basic-title">Add Interpreter</h4> <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> <span aria-hidden="true">×</span> </button> </div> <form #interpreterForm="ngForm" (ngSubmit)="onInterpreterSubmit(interpreterForm.value)"> <div class="modal-body"> <div class="form-group"> <div class="row"> <input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" [disabled]="!interpreterForm.valid" data-dismiss="modal">Submit</button> </div> </form> </ng-template>Adding below to the component
@ViewChild("placesRef") placesRef : GooglePlaceDirective; constructor(private modalService: NgbModal) {} triggerAddInterpretersModal(content: any) { this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}) } public handleAddressChange(address: Address) { console.log(address); }
And getting this error when the page is loaded
ERROR Error: NG0301: Export of name 'ngx-places' not found!
Anything i could be missing here??
app.module.ts file :
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { RouterModule } from "@angular/router";
import { ToastrModule } from 'ngx-toastr';
import { AppComponent } from "./app.component";
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { AppRoutingModule } from "./app-routing.module";
import { ComponentsModule } from "./components/components.module";
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';
import { ProductService } from './services/product.service';
import { ComapnyService } from './services/company.service';
import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login';
import { ReactiveFormsModule } from '@angular/forms';
import { LoginGuard } from "./guards/LoginGuard";
import { GooglePlaceModule } from "ngx-google-places-autocomplete";
@NgModule({
imports: [
BrowserAnimationsModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
FormsModule,
HttpClientModule,
ComponentsModule,
NgbModule,
RouterModule,
AppRoutingModule,
ReactiveFormsModule,
SocialLoginModule,
GooglePlaceModule,
ToastrModule.forRoot()
],
declarations: [AppComponent, AdminLayoutComponent],
providers: [ProductService, ComapnyService,
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(
'xxxx'
)
}
]
} as SocialAuthServiceConfig,
} ,LoginGuard ],
bootstrap: [AppComponent]
})
export class AppModule {}