Angular 14+ support

[rubenheymans]

Is your feature request related to a problem? Please describe 🙏

It does not work in Angular 14+

Describe the solution you'd like 🤔

Please make it work in Angular 14+

Describe alternatives you've considered ✨

I tried using just the Autocomplete, but when I click on an item I want to go to the item URL without reloading.
Now it refreshes the page which is not what I want in a SPA.

  autocomplete({
      container: '#autocomplete',
      placeholder: 'Search for products',
      debug: true,
      getSources({ query }) {
        return [
          {
            sourceId: 'courses',
            getItems() {
              return getAlgoliaResults({
                searchClient,
                queries: [
                  {
                    indexName: 'vetfysio courses',
                    query,
                    params: {
                      hitsPerPage: 5,
                      attributesToSnippet: ['text:10'],
                      snippetEllipsisText: '…',
                    },
                  },
                ],
              });
            },
            templates: {
              item({ item, components, html }) {
                return html`<div class="aa-ItemWrapper">
                  <div routerLink="${item['url']}" class="aa-ItemContent">
                    <div class="aa-ItemContentBody">
                      <div class="aa-ItemContentTitle">
                        ${components.Highlight({
                          hit: item,
                          attribute: 'title',
                        })}
                      </div>
                      <div class="aa-ItemContentDescription">
                        ${components.Snippet({
                          hit: item,
                          attribute: 'text',
                        })}
                      </div>
                    </div>
                  </div>
                </div>`;
              },
            },
            onSelect({ itemUrl }) {
              console.log('itemurl', itemUrl);
            },
            getItemUrl({ item }) {
              return item['url'] as string;
            },
            noResults() {
              return 'No matching items.';
            },
            // ...
          },
        ];
      },
      navigator: {
        navigate({ itemUrl }) {
          console.log('itemurl navigate', itemUrl);
          window.location.assign(itemUrl);
         // Here I should be able to use the Angular routing
        },
      },
      // ...
    });```

[dhayab]

Hi, Autocomplete renders its elements outside of Angular, so the routerLink directive will not work in your item template.

You can instead programmatically navigate to your item URL by injecting the Router service in your component and calling it from the onSelect() handler. You'll also need to carefully switch getSources() and onSelect() to arrow functions in order to stay in the Angular component scope.

You can find an example in this sandbox: https://codesandbox.io/p/sandbox/ng-autocomplete-kvc113?file=/src/app/app.component.ts.

[rubenheymans]

Hi, Autocomplete renders its elements outside of Angular, so the routerLink directive will not work in your item template.

You can instead programmatically navigate to your item URL by injecting the Router service in your component and calling it from the onSelect() handler. You'll also need to carefully switch getSources() and onSelect() to arrow functions in order to stay in the Angular component scope.

You can find an example in this sandbox: https://codesandbox.io/p/sandbox/ng-autocomplete-kvc113?file=/src/app/app.component.ts.

That's exactly what I need thanks man! The docs are not really clear for me.
I actually posted this issue in the wrong repo, it's Angular InstantSearch that's not working on Ivy.
But I don't need that now since I got this autocomplete working how I wanted.
Now when I click on a result, the router will navigate to the page and scroll to the content's h2 title tag using an anchor.
I only need to find out how to highlight the content I just searched for.

[Haroenv]

does the highlight component not already do that @rubenheymans ?

[rubenheymans]

does the highlight component not already do that @rubenheymans ?

For the search results in the autocomplete yes, but I also need to highlight my content itself. Or can I also just use the highlight component for that? The word earum should be highlighted (so without using the browser search function)

So I did post this in the correct repo but dhayab transferred it, I see someone else also posted the same issue in that repo so it's fine.

[dhayab]

For the search results in the autocomplete yes, but I also need to highlight my content itself. Or can I also just use the highlight component for that?

The Highlight component is not accessible outside of Autocomplete and only works with content that follows a specific syntax returned by Algolia. You might have more success in having your own implementation or looking for readily available Highlight pipes for Angular.

[rubenheymans]

I used this:
https://dev.to/juniordevforlife/highlight-search-results-with-an-angular-pipe-42cb
Thanks again, glad I choose Algolia and not Melisearch or Typesense