How to do autocompletion with angular 2+ in a not hackish way?

How to do auto completion with algolia and angular 2 and higher in a not hackish way?

I got algolia working with angular 2+ but I had to do a few hacks which I would like to avoid if possible:

This is what I did:
I.) I included the javascript algolia library in the index.html file and then used the following code to make the methods known to type script in the component:

declare var algoliasearch: any;
declare var autocomplete: any;

II.) The autocomplete methods gets called in a component to add autocompletion to the input field. I am not sure if it is necessary to perform some cleanup or if it is okay if the autocomplete method gets called multiple times.

III.) I included the CSS as external CSS file in the index.html file. The CSS needed to be included as external CSS. If you define it in the component like you would normally do then the final compiled CSS won’t apply to teh generated elements like the suggestions. This is due to angular transforming the CSS into CSS that only applies to elements that belong to the component. Angular does this by having a component specific attribute on the elements of a component. This component specific attribute gets then checked for in the CSS. Algolia generated elements lack this marker attribute so they won’t be styled by the CSS compile result.

Is there a less hackish way to use the algolia auto completion with angular 2 and higher?

Hey @Florian,

Can you share a project, as you said it’s not an ideal situation right now, but seeing a whole project will make it easier for us to prioritise how to fix this situation.


Sorry, I don’t have the time to extract and prepare a small project with just this.

Did you try using import or require to import the libraries, normally that should work too. I wonder what error you get

That’s definitely okay, I understand not wanting to take the time for this

No I didn’t use require/import. However since currently it looks like won’t use algolia I don’t plan to investigate further. Thanks for your replies though!

Just for curiousity / possible future projects: How would the import would have looked like?

import * as algoliasearch from 'algoliasearch';

should work in TypeScript, that’s what we’re using on our dashboard

By the way, we’re currently working on a version of InstantSearch for Angular, if you want to be kept in touch when we release a beta of that, you can fill in this form