title: How to use Environment Variables for API Url (Angular 8, TypeScript, HTML and SCSS for FrontEnd and C# for BackEnd)
body: <p>My API Url is hardcoded to <code>localhost:4300</code> in my Development environment ( which is in <strong><code>utilities.ts</code></strong>)</p>
  
  <p>These are the codes below</p>
  
  <p><strong>utilities.ts</strong></p>
  
  <pre><code>const hostToApiUrlMap = { 
  localhost: 'http://localhost:4300'
  };
  </code></pre>
  
  <p><strong>environment.prod.ts</strong></p>
  
  <pre><code>export const environment {
  production: true
  };
  </code></pre>
  
  <p><strong>environment.ts</strong></p>
  
  <pre><code>export const environment {
  production: false
  };
  </code></pre>
  
  <p>I know when we move to Production environment the API Url will change.
  My question is "How can I use Environment Variables to configure the API Url on the frontend so that it is not Hardcoded to <code>localhost:4300</code>?</p>
  
  <p>So that whenever the API Url changes, the Development environment will automatically update to the new API Url</p>