Environment variables in Angular Application

hello guys welcome to another short tutorial on angular in this video i am going to show you how we can use environment variables in our angular application these environment variables are very useful when you are developing an application in an environment and deploying that application in a different environment in a real-time development of applications this is a common where we are going to develop an application in a development environment and deploying that application in a production versions in that kind of situation these environment variables are very helpful to define the variables and using in our application to handle that kind of scenarios angular has provided an option where you can define the variables in two different files so whenever you are developing an application in dev environment by default angular will use one file and when you are building an application and deploying into in production version it will use another file to use that one you can see there is a folder called environments when you expand that one you will see two files as you can see here environment.ts file this is a non-production file so whatever the variables you define in this particular file those will be used whenever you are running an or whenever you are compiling an application and similarly there is a broad version of the environment file which will be used whenever you are going to build this application and deploying into any server as you can see here there is a variable which is defined here production true which means this is a production file and in the environment.ts file you can see production is mentioned as well so this is not a production file so based on these variables whenever angular compiles or build these files will be chosen so we can make use of these environment files and define the variables here and we can use those variables in our applications so let's see how we can use these environment files and define the variables so let's add one variable here i'll name this one as a global variable and i will add a test content within this global variable so you can define the same variable in the environment.ts file so here you can alter the text content here so that's how you define the variables in environment and environment.ts files so whenever this application builds this production version of the variable can be taken and whenever we are just running in our local system whenever we are compiling this variable will be taken to use this variable in our application you can go to the ts file where you want to use it here there input the environment file environment which is under environments folder environment then fetch the variable and assign it to a variable here i will assign to a global variable fetch is equals to environment dot global variable the value is stored in global variable so i have fetched that one now so that i can use this global variable whichever we have fetched into our html file here i will add a simple content where it will say data fetched from global variable and i will paste the variable whichever i have fetched so i have saved this file so if i go back to your browser you can observe that the variable which we have defined in the environment that is being fetched into our html file one of the real time usage is whenever we are developing an application the web api will be in our localhost at that time you can use a variable called host and you can define the path into this variable when it comes to deployment or real usage the url for the web api will be different something like this one at that time you can mention that host here in the production environment file and you can use this host variable in the web api service which we are going to create and we can bring that one into this file using the import function using the import and there we can define it to a variable then we can use that one in our get method like this you can make use of global variable in our angular application whenever it is required i hope you got an idea how we can use environment variable in our angular application thank you guys for watching this video if you like this video please click on like button share it with us and subscribe to my channel

Channel: E 4 E-Learning

Views: 255

Keywords: Environment variables, Adding data in a grid, Angular, Angular 11, latest angular, angular for beginners, learn angular, examples of angular, basic angular, angular concepts, environment variables, deploy angular, 2 versions of angular, production in angular, global variables in angular, global variables, web application development, host angular application, API values in angular, quick guide to angular, angular path, angular learning

Id: 7yI_UX5SAFs

Length: 5min 5sec (305 seconds)

Published: Tue Sep 21 2021