Angular2: Is it possible to use custom types in html templates?

Question

For example I have an enumeration

export enum CustomPages{
  page1 = 1,
  page2 = 2,
  page3 = 3
}

In html template I want to access this enum.

For example:

<a class="nav-link" [class.active]="page == CustomPages.page1" href="#">Categories and responses</a>

It throws an exception

Cannot read property 'page1' of undefined

Answer 1

You need to define CustomPages inside your component.

import {CustomPages} from 'path/to/enum/CustomPages';

@Component({...})
export class YourComponentName {

    CustomPages = CustomPages; // <- assign enum to the same name as a field.

    constructor(..){..}

    ...

}