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

Question

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.

Answer 1

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.