How to access a constant in an Angular 2 component and service?

I have a constants file constants.ts:

export const C0NST = "constant";

I access it in a service some.service.ts like so:

import { C0NST } from './constants';

console.log(C0NST); // "constant"

However, when I access it in a component template:

some.component.ts:

import { C0NST } from './constants';

some.component.html:

{{ C0NST }} <!-- Outputs nothing -->

However defining a member in the component class works:

some.component.ts

public const constant = C0NST;

some.component.html

{{ constant }} <!-- constant -->

I don't understand why I was able to access the imported constant directly in the service class but not in the component template even though I imported it in the component class.

In Angular2, the template can only access fields and methods of the component class. Everything else is off-limits. This includes things which are visible to the component class.

The way to go around this is to have a field inside the component, which just references the constant, and use that instead.

It's one limitation of the design, but perhaps you should think a bit more about why you need a constant in the template in the first place. Usually these things are used by components themselves, or services, but not the template.

Since in the Component's template you can only use attributes of the Component's class, you can't directly use any external constants (or external variables).

The most elegant way that I've found so far is the following:

import { MY_CONSTANT } from '../constants';

@Component({
  // ...
})
export class MyTestComponent implements OnInit {

  readonly MY_CONSTANT = MY_CONSTANT;

  // ...
}

which basically just creates a new attribute MY_CONSTANT inside the component class. Using readonly we make sure that the new attribute cannot be modified.

Doing so, in your template you can now use:

{{ MY_CONSTANT }}

The scope of Angular2 template bindings is the component instance. Only what's accessible there can be used in bindings.

You can make it available like

class MyComponent {
  myConst = CONST;
}

{{myConst}}