Angular2 access global variables from HTML template

You are creating a variable countryCodes in you component but the view is accessing COUNTRY_CODES instead*

Global identifiers like Array, window, document, class and enum names and global variables can’t be accessed directly from within the template.

The scope of the template is the component class instance.

What you can do if you need access to any of these, is to create a getter in your component like

import { COUNTRY_CODES } from "../constants";

@Component(...)  
export class MyComponent {
  get countryCodes() { return COUNTRY_CODES; }
  // or countryCodes = COUNTRY_CODES;
}

then it can be used in the template like

<option *ngFor="let countryCode of countryCodes" [value]="countryCode">{{countryCode | countryName}}</option>

Using a shared service like suggested in the other answers works similar. What’s the better approach depends on the concrete use case. Services are easy to mock for unit tests in contrary to global variables.

See also

• Select based on enum in Angular2
• How to bind a list in Angular2?