Search code examples
angulardartangular-dartalgoliadart-js-interop

Algolia Auto Complete Search in an Angular Dart Component

I am trying to implement the Algolia Search Autocomplete function into an Angular Dart Project.

I am able to get it to work if I put the input search box on the Index page, but if I put the search box in a component, it does not work.

Please see the attached GitHub Project outlining my issues.

Link to GitHub Repo

When it loads, you'll see two search boxes labeled appropriately.

One of them works, the other does not.

What do I need to do to get that search box working in a component?

Thank you!!!

Solution

  • I don't know anything about Algolia but I'm guessing this is a timing issue.

    The script to initialize the search box is run before the angular app has started and so Algolia can't find the input.

    There is a couple of things you could do:

    • Not run the JS script, or initialization until the component is fully loaded. Using ngOnInit and package:js to call the initializing script
    • Or reparent the input box in the component itself. Load it in the main page with the JS script, and then in the component using dart:html find the element and put it in the right place in your app.