0.0.3 ā¢ Published 5 years ago
ngx-custom-google-places-autocomplete v0.0.3
NgxCustomGooglePlacesAutocomplete
Google Place Autocomplete Wrapper that allows you to combine custom results from your server (or other sources) and apply your own TemplateRef
for added flexibility šš¾
ā”ļø Inspired by Airbnb & HipCamp's search field
šØš»āš» Installation
npm install --save ngx-custom-google-places-autocomplete
npm install --save @agm/core
Setup @NgModule
import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
import { NgxCustomGooglePlacesAutoCompleteComponentModule } from 'ngx-custom-google-places-autocomplete';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
AgmCoreModule.forRoot({
apiKey: YOUR_API_KEY,
libraries: ["places", "geometry"]
}),
NgxCustomGooglePlacesAutoCompleteComponentModule
],
providers: [
GoogleMapsAPIWrapper
],
bootstrap: [AppComponent]
})
export class AppModule { }
šļø Notes:
Internally, this component uses Angular Material UI's matInput, mat-action-list, and mat-list-item
Install Material UI
npm install --save @angular/material @angular/cdk @angular/animations
Import Material Theme
// in your styles.scss
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
(Optional) Import googleapis fonts in your index.html
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Usage
app.component.html
<div style="text-align:center">
<ng-template
#sampleTemplate
let-label="label"
let-img="img"
let-icon="icon">
<!--
Note: you'll have to import MatIconModule to your app.module.ts if you want to use this
import { MatIconModule } from '@angular/material/icon'; and import fonts.googleapis.com to your index.html
-->
<mat-icon matListIcon>{{icon}}</mat-icon>
{{ label }}
<img [src]='img' class="campground-photo" />
</ng-template>
<ngx-custom-google-places-autocomplete
[placeholder]="'Camping near me...'"
[autoCompleteOpts]="autoCompleteOpts"
[customResultTemplate]="sampleTemplate"
[customResults]="customResults"
(customPlaceSelect)="customPlaceSelect($event)"
(googlePlaceSelect)="googlePlaceSelect($event)"
(change)="onChange($event)"
>
</ngx-custom-google-places-autocomplete>
</div>
app.component.ts
import { IGooglePlace, ISuggestionRow } from 'ngx-custom-google-places-autocomplete';
interface myCustomResult extends ISuggestionRow {
img: string;
value: string;
icon: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public customResults: Array<myCustomResult> = [];
public autoCompleteOpts = {
types: ["geocode"],
componentRestrictions: { country: "can" }
};
customPlaceSelect ($event: myCustomResult) {
console.log($event);
}
googlePlaceSelect ($event: IGooglePlace) {
console.log($event);
}
onChange (searchTerm: string) {
// fetch data from server (service)
setTimeout(() => {
this.customResults = [
{
label: 'Van Buren State Park',
img: './assets/photos/photo1.jpg',
value: 'vanburen',
icon: 'beach_access'
},
{
label: 'Vanderbilt Mansion National Historic Site',
img: './assets/photos/photo2.jpg',
value: 'vanderbilt',
icon: 'pets'
},
{
label: 'Van Riper Campground',
img: './assets/photos/photo3.jpg',
value: 'vanriper',
icon: 'pool'
},
];
}, 1000);
}
}
Input
Param | Type | Required | Description |
---|---|---|---|
autoCompleteOpts | Object | Optional | Google Places Autocomplete Opts |
customResultTemplate | TemplateRef | Optional | Template for your custom result row |
customResults | Array<{ label: string, ... }> | Optional | Your custom results |
Output
Param | Type | Description |
---|---|---|
change | string | Fires everytime the user types in a word. Similar to input's (keyUp) change event. Use this to fetch data from your server. |
googlePlaceSelect | IGooglePlace | Fires when the user selected a "google place" from the autocomplete |
customPlaceSelect | { label: string, ... } | Fires when the user selected one of your custom results from the autocomplete |
Further Documentation
- https://material.angular.io
- https://angular-maps.com/
https://developers.google.com/places/web-service/autocomplete
š Props
Super props to Airbnb, HipCamp, and Angular teams.
ā¤ļø "Legal"
This software is provided as-is, and all that usually lovely stuff.
Ā© franciscaoile