title: Declare and change global variable in Angular?
body: <p>I develop an Angular app based on .NET Core and I want to create a global variable for countries by using a <code>DropdownList</code> so that the global value can be changed easily. Then access this global value (selected country) through all of the other pages. Normally I would use the following approach, but I have really no idea how should I modify the following approach so that the user can set the global filter value (selected country) at any time.</p>
  <p><em><strong>globals.ts:</strong></em></p>
  <pre><code>export const version: string=&quot;22.2.2&quot;;
  </code></pre>
  <p><em><strong>heroes.component.ts:</strong></em></p>
  <pre><code>import * as myGlobals from 'globals';
  
  export class HeroesComponent implements OnInit {
  public heroes: Hero[];
  public selectedHero: Hero;
  
  // Here we access the global var reference
  public helloString: string=&quot;hello &quot; + myGlobals.version + &quot; there&quot;;
  
       ...
  
      }
  }
  </code></pre>
  <p>However, I have no idea how can I set this global value by using this approach or is there any approach for this. Is there any proper way for this?</p>
  <p>Shall I add a dropdownlist to <code>globals.ts</code> and update the <code>version</code> whenever user select the version on this dropdownlist?</p>
  <p><strong>Is using a service with</strong> <code>BehaviourSubject</code> <strong>the best option for fixing this issue?</strong></p>