Angular2 access global variables from HTML template
<p>I have a global variable to store the list of countries like this:</p>

<pre class="lang-ts prettyprint-override"><code>export var COUNTRY_CODES = ["AD", "AE", "AF" /* and more */];
</code></pre>

<p>In one of my component, I'd imported the variable using normal import statement</p>

<pre class="lang-ts prettyprint-override"><code>import { COUNTRY_CODES } from "../constants";
</code></pre>

<p>I am able to access this global variable freely in my component code, but failed to achieve something like this on the HTML template:</p>

<pre class="lang-html prettyprint-override"><code>&lt;option *ngFor="let countryCode of COUNTRY_CODES" [value]="countryCode"&gt;{{countryCode | countryName}}&lt;/option&gt;
</code></pre>

<p>I could just pass along the global variable to component by defining a local variable and assign the global variable to it during initialization.</p>

<pre class="lang-ts prettyprint-override"><code>ngOnInit() {
  this.countryCodes = COUNTRY_CODES;
}
</code></pre>

<p>And change the <code>ngFor</code> to loop on this local variable to make it works.</p>

<p>My question: Is this the right way to do? I'm not totally comfortable with defining bridging variables every time I want to use global variables in my template.</p>