How to use environment variable in Angular 16

In this article I will demonstrate to you how to set and access environment variables in Angular 16.

1 — Create an empty Angular Project

First, let’s start off my creating an empty Angular 16 project. To do that open a Terminal in your VScode and type the following command:

> ng new environmentVariablesDemo

and make sure to follow the command prompts. This might take a bit to complete because Angular is going to download its required packages. Below is a link to an article that I have created that will show you how to create an empty Angular 16 project along with all the necessary requirements.

How to start a new Angular 16 Project in few easy steps

2— Create the basic environments using Angular CLI

Angular CLI provides you the ability to create the environment folder along with a development and prod environment files. To leverage the Angular CLI type the following command in your project terminal:

ng g environments

Once you execute the command, you will notice that a new folder called “environments” is added to the project. Additionally, two environment TypeScript files are added. One for…