Angular 2 ng2 How to use TypeScript enum inside template?

Question

I have component for multiple filters with different types. For type recognition I want to use enum with filter types. How to use enum inside template when sample below does'nt work?

I thought it should work by only importing enum inside component where I want to use this enum.

import { FilterType } from './types/FilterType';

And use it inside template like FilterType.INPUT_SELECT and FilterType.INPUT_TEXT but it does'nt work then I used variable but it also does'nt work.

<div *ngFor='let filter of filters'>
  <select *ngIf='filter.type === checkType.INPUT_SELECT'>...</select>
  <input *ngIf='filter.type === checkType.INPUT_TEXT'></input>
</div>
...
export class FiltersComponent {
  checkType: FilterType;
  @Input() filters: any[];
}
...
export enum FilterType {
  INPUT_SELECT,
  INPUT_TEXT
}

score 15 · Accepted Answer · edited Aug 27 '19 at 13:53

15

You need to assign a value to `checkType:

checkType: FilterType = FilterType;

edited Aug 27 '19 at 13:53

Community

1
1

answered Jun 30 '16 at 08:00

Günter Zöchbauer

623,577
216
2,003
1,567

Type 'typeof FilterType' is not assignable to type 'Type' – Adam Michalski Jun 30 '16 at 08:12
Sorry, I assumed a reference to an enum would be of type `Type`. I don't know TS too well I use only Dart locally. You can use `any`. `Object` should work as well. – Günter Zöchbauer Jun 30 '16 at 08:17
1

It works but now I see it in different view, I will pass this enum as parameter. Thanks. – Adam Michalski Jun 30 '16 at 08:22
2

You can change type to `checkType: FilterType = FilterType;` or just `checkType = FilterType` – Adam Michalski Jul 13 '18 at 12:07

Angular 2 ng2 How to use TypeScript enum inside template?

1 Answers1