Can I access my environment variables inside a HTML file in Angular

Question

I'd like to be able to do something like this:

<img src="{{photoUrl.replace('upload/', 'upload/' + environment.someVariable)}}">

I can access my environment variables inside my .TS file like below but it's not recognized in the HTML file.

import { environment } from 'src/environments/environment';


ngOnInit(): void {
  const something = environment.someVariable;
}

yes just create one property in component then assign the value of your environment environment = environment.someVarible; — Indraraj26
– Indraraj26, Commented Sep 13, 2021 at 18:32

Indraraj26 · Accepted Answer · 2021-09-13 18:35:19Z

3

yes just create one property in component then assign the value of your environment.

ts:

public environment = environment;

html:

{{environment.someVariable}}

answered Sep 13, 2021 at 18:35

Indraraj26

1,9941 gold badge17 silver badges33 bronze badges

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

6 Comments

chuckd Over a year ago

I know that's the easy way, just seeing if there is a way to access the environment variables without creating a new variable inside the .ts file. It seems like there should be a way!? FYI - I have lots of these variables, not just 1 and it would be on multiple pages. So i would be doing lots of variable creation in each .ts file, which is what I'd like to eliminate.

Indraraj26 Over a year ago

Short Answer:NO, You can create directive or Pipe, Basically use pipe to alter it i would say according to environment.

Indraraj26 Over a year ago

You pass an value it will concat with environment.someVariable return modifiedValue

chuckd Over a year ago

That seems like a lot more work as I would have to create a custom pipe. And the environment variables would still have to be read in the custom pipe file, right?

Indraraj26 Over a year ago

Yes but with that you will not have to import environment anywhere and create tons of variable.

|

Collectives™ on Stack Overflow

Can I access my environment variables inside a HTML file in Angular

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related