Angular - How to set a dynamic environment variable?

Question

I have an environment.ts like this:

export const environment = {
  production: false,
  // SERVER_API_URL: 'http://localhost:8080/',
  baseImgUrl: ``,
};

To initialize the baseImgUrl I need to call a service, and in the ngOnInit in the app.component.ts I do it:

this.getImageUrl().subscribe(res => {environment.baseImgUrl = res.value});

But this is an async function and in other components I need to use these baseUrl for getting the userImage

Example: In my account-component in the ngOnInit function I tried this:

this.getUserImageService().subscribe(res => { this.url = environment.baseImgUrl + res})

I need to use the baseUrl to construct the url for the image profile.

It could work but sometimes the environment.baseImgUrl could be an empty string. what should be the best solution to valorize the environment variable before the loading of other components that will use that variable?

yeMarn · Accepted Answer · 2021-10-13 16:43:06Z

1

It is better to use the state management or localStorage. With state management, even if your image is updated in one component, it will be changed in other components as well. You can check out the NGRX for state management library. If you want to use localstorage, you need to have new variable for every component you want to show and you have to make localstorage.get('baseImageURL') in ngOninit() method of every component.

answered Oct 13, 2021 at 16:43

yeMarn

362 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - How to set a dynamic environment variable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related