CODEWITHSUNDEEP
angulartypescriptangular6asp.net-web-api2
Ashish Kumar Jaryal
Ashish Kumar Jaryal

Reputation: 812

How to globally share configuration value picked up from back end with all the angular 6 application components?

I've MAX_FILE_SIZE and other configurations defined in Web API's Web.config. I need to get these configurations from back end and share these configurations to all the angular 6 components globally. Can anyone please tell me the best approach to do this?

These configuration must be read only in the front end code. These configurations may change occasionally during run time at the back end from Web.config file.

Upvotes: 1

Views: 191

Answers (1)

Philip Antin
Philip Antin

Reputation: 136

My response assumes that you're configuring values that your Angular components will use internally (like limits on the file size of user uploads, for example), and not configuring how these components are set up in the first place (like...Docker container settings?). It also assumes that you're relatively new to Angular. If those assumptions are wrong in your case, I hope my response is useful to someone for whom those assumptions are correct.

Your API should have a RESTful way to retrieve that configuration information. Create a service using Angular's HTTP client that retrieves this information from the API. If you use the recommendations below, the HTTP call should return an Observable (an rxjs concept) that the service uses to put the retrieved information into a centrally-accessible location.

In order to share this information with every component, use ngrx and create a store that every component can access. If your service puts the configuration information into the store, then the information should be accessible to every component. Here's a good article on how to get data from one place to another in Angular. There's a conceptually helpful section on using ngrx.

When your app.component initializes, dispatch an action to retrieve the configuration information. Set up the service with an effect that watches for that action and makes the HTTP call when it comes through. When the HTTP call completes successfully, dispatch another "success" action that uses the retrieved data as the payload. Set up a reducer that will update the state of the store when this success action comes through. Then you can use a selector in any component that needs this configuration information.

This sort of setup (using ngrx) is a very good one, since it maintains a single source of authority and also enables each component to react to changes in the underlying data.

Upvotes: 2

Related Questions