Algolia Places with Angular

Hi,

I’m trying to integrate Algolia Places but I don’t know how to import the js file and using it. I’m using Angular 5. Any help or advice?

Thanks!

Hi @it.register,

Thanks for contacting Algolia. The Places library is available as a JS library places.js via npm or CDN: https://community.algolia.com/places/documentation.html

Best regards!

Hi David!

Thanks for the reply. I read that doc page and I think I didn’t make a clear question.

My problem is how to import the js file using typescript and how to initialize. For example I import moment library (js file without typescript typing) in this way:

import * as moment from 'moment';

So I tried this but it didn’t work:

import * as AlgoliaPlaces from 'places.js';

On doc I see the following code:

var placesAutocomplete = places({
appId: <YOUR_PLACES_APP_ID>,
apiKey: <YOUR_PLACES_API_KEY>,
container: document.querySelector('#address-input')

});

So I need to know how would be using typescript inside an Angular component.

Thanks!

Hi Javi,

I don’t have much experience with Typescript but I have some with the Places.js library, so maybe we can help each other.

Could you describe what happens if you try to use the following import syntax?

import places from 'places.js';
// or const places = require('places.js');

Additionally, would you mind sharing which version of Typescript you are using? Or maybe you can share your project if it is open source? Alternatively, could you share a codesandbox that illustrates the issue you are having?

Thanks!

Hi Jonathan,

Finally I got it. I don’t have time right know for sharing a full working example but I leave here the component.

The import should be as follows:

import * as places from 'places.js';

So my component is:

import { Component, ElementRef, Input, OnInit, Output, ViewChild, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import * as places from 'places.js';

@Component({
    selector: 'app-autocomplete',
    templateUrl: './autocomplete.component.html'
})
export class AutocompleteComponent implements OnInit, OnDestroy {
    @Input() q: string;
    @ViewChild('autocomplete') qElementRef: ElementRef;

    private searchService: SearchService;
    private places: any;

    public ngOnInit() {
        this.searchControl = new FormControl();

        this.places = places({
            appId: '<appId>',
            apiKey: '<apiKey>',
            container: this.qElementRef.nativeElement,
            style: false,
            debug: true
        });

        if (this.q) {
            this.places.setVal(this.q);
        }

        this.places.on('change', function resultSelected(e) {
            //...
        });

        //.....
    }
} 

I think the official doc should have some example using typescript.

2 Likes

Hi Javi,

Glad you could work it out in the end.
We’re in the process of improving our documentation for the Places.js library so feedback is always welcomed.

I’ll see if we can add some examples for Angular + TypeScript / React / Vue, but we’re already pretty loaded with tasks, so it might take some time.

If you have a simple example that you want to share, we’ll gladly take any PR that improves our documentation.

Best,