Configure and use environment specific values in Angular and html template

Configuring application environments

First define different environment files for the environments you might have under the project’s src/environments/ folder. Below there is an extract from environment.ts (used for development) and used for production:

export const environment = {
  production: false,
  HOST: 'http://localhost:4200',
  API_URL: 'http://localhost:3000/api',

export const environment = {
  production: true,
  HOST: '',
  API_URL:  '',

The build command (and ng serve) uses environment.ts as the build target when no environment is specified.

The main CLI configuration file, angular.json, contains a fileReplacements section in the configuration for each build target, which lets you replace any file in the TypeScript program with a target-specific version of that file. This is useful for including target-specific code or variables in a build that targets a specific environment, such as production or staging.

By default, no files are replaced. You can add file replacements for specific build targets. For example

"configurations": {
  "production": {
    "fileReplacements": [
        "replace": "src/environments/environment.ts",
        "with": "src/environments/"

This means that when you build your production configuration with ng build --configuration production, the src/environments/environment.ts file is replaced with the target-specific version of the file, src/environments/

You can add additional configurations (e.g. pro different stages) as required.

Using environment-specific variables in your app

Then in your code import environment and use the values defined in the files above, as in the following example:

import { environment } from '../../../environments/environment'
import { localStorageKeys } from '../model/localstorage.cache-keys';

export class SystemService {
  cachedQueries = {
    PUBLIC_TAGS_LIST: `${environment.API_URL}/public/bookmarks`


If you want to use environment variables in your angular html template, then just define a local variable for the imported environment and use it in the template, like in the following example:

import { environment } from 'environments/environment';

  selector: 'app-social-share-dialog',
  templateUrl: './social-share-dialog.component.html',
  styleUrls: ['./social-share-dialog.component.scss'],
  providers: [DatePipe]
export class SocialShareDialogComponent implements OnInit {

  sharableId$: Observable<any>;
  readonly environment = environment;

The html part, where HOST value is used:


Reference -

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

routerLink with query params in Angular html template

routerLink with query params in Angular html template code snippet Continue reading