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.
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?
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
- 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)