Don't clutter the component tree with config objects

[mwawrusch]

Hi guys, so using a provider component approach is a bit too react for Angular IMHO, it clutters the code base. All the config option would be better served in the forRoot() call when initializing the app module.

[iam4x]

Hi @mwawrusch the solution you suggested is not compatible with having mutliple instances of <ng-ais-instantsearch> with different config on the same page.

I would love to discuss more on the topic, as you may have already understood I'm not someone from the Angular world 👍

[Michael-Reich]

In this example it is very intuitive maybe it is possible to pass the config to the component: https://angularfirebase.com/lessons/angular-full-text-search-with-algolia-frontend-part-1/

[Jefiozie]

To get the discussion started. We need to configure a config per <ng-ais-instantsearch> component correct? Maybe we can create a service that has all configuration? To provide basic configuration we can use injection tokens, specific configuration can be added on initial load / loading of a specific component via a specific call to the configuration service?

[tkrugg]

Hi @Jefiozie. Thank you for reviving this topic. I'm new to angular myself and I may be missing your point.

Can you please explain Maybe we can create a service that has all configuration as I'm not quite sure how we can make a single configuration service convenient for both users using one configuration as well as those using multiple configurations.

Can you think of an example implementing that approach?

[Jefiozie]

Hi @tkrugg ,

As I'm new to Instantsearch probably you can tell me something about the way this works. But here is my general idea (what could be a option).

If I look at the documentation here for every component of ais-instantsearch there should be a configuration via the input binding [configuration]. Correct?

If so what we could do is create a configuration service that is created for each ais-instantsearch component. This service will get the configuration via injection or environment settings. The ais-instantsearch component is always looking at this service and will use the configuration from that point on.

Now the harder part is how to identify the configuration that should be used. Maybe we can just use a id as a reference or something unique to get the correct config.

This part is harder for me as I don't have any knowledge on the exact configuration implementation that is needed from your library.

Hope I explained enough to understand what I mean. If not just let me know maybe I can make a small example for this.😃

[Haroenv]

A small sample would definitely be great! I'm also a bit missing what you're describing would look like and why it would be better, thanks!

[Jefiozie]

So I have created a pretty basic app where you can see different "configs" for the components. These configs are received via the config-service that will get it from the enviroment.ts file. To demonstrate the possibility for the ais-instantssearch component I created the app-random component. Hope this will clear a bit of my comment above. example app

@Haroenv I'm not saying this is a better way but I think it is a more general way of using specific settings/configuration for a component. If you are fine with the way it is now I'm happy with it 😉 just commented on this issue to see where I can help.

[Jefiozie]

Just had some thoughts about it and we can even just use a Singleton service for the configuration service. See example

[Jefiozie]

Any ideas on this topic?

[Haroenv]

We will need more time to find out the best solutions, and more opinions to see how this compares to other projects as well before a decision on this can be made :)