Algolia Auto Complete Search in an Angular Dart Component

Issue

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.

Answered By – Ted Sander

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.