Angular service global injection

Question

Is there a way to access a field of a service without injecting the service into every component? or equivalently: does some concept of 'global' service exist in Angular 6?

My use case is as follows: Text labels for fields are retrieved at application startup by a service called ConfigurationManagementService. This service has an observable field CurrentApplicationContext$, which has an object field ApplicationConfiguration which has a object field Label. (this has to do with the way the backend has been set up).

Now: to use the labels in a view of a component, I have to inject ConfigurationManagementService (here as ConfigurationManagement) into every component and then subscribe to it (luckily I can use the direct async pipe method), like this:

<button mat-raised-button color="primary">
<mat-icon">add_shopping_cart</mat-icon> 
{{ (ConfigurationManagement.CurrentApplicationContext$ | async)?.ApplicationConfiguration?.Label['Buy'] }}
</button>

My question is: is there another shorter way of accomplishing this? Because this is a very time-consuming and tedious task if you execute it as mentioned for every component and every text field in the application.

Thanks!

score 0 · Answer 1 · answered Dec 04 '18 at 10:25

Pass the data to localstorage like localStorage.setItem('itemName',value) or set it as a cookie and access them in the component constructor and retrieve data from localstorage/cookie then no need to subscribe and dependency injection.but you have to get all data in app loading.

Angular service global injection

1 Answers1