Using TypeScript Enums in Angular Templates

Enums (or enumerations) are a data type supported in TypeScript. Enums allow you to define a set of named constants that are tied to and can be used in place of associated numeric constants.

Let's say that we want to create an enum called Direction that has values for the four cardinal directions. That would look something like this:

enum Directions {
  North = 1,
  South = 2,
  East = 3,
  West = 4
}

Now, if you ever want to reference one of those numeric values, you can use the associated named constant, like so:

currentDirection = Directions.North;

Enums in Angular

An issue arises when using Enum type properties in Angular templates, however. Templates can only accept numeric constants, not named constants. This can produce unclear markup, as well as make it harder to figure out which value to use.

<wj-flex-chart [chartType]="2" …>

As you can see, it's not clear what type of chart we’re initializing here going off the numeric enum in the markup. The source of this problem is that templates cannot accept values that are not component properties as template expressions. However, since the enum named constants are still available, we can utilize them by associating their value with a variable in TypeScript:

import * as wjcChart from '@grapecity/wijmo.chart';
…
export class AppComponent {
  chartType = wjcChart.ChartType;
}
  ChartType = wjcChart.ChartType;

Here, we have set the ChartType enum to our chartType variable inside of the component. Now we are able to reference the enum members by named constant inside of the template bindings:

<wj-flex-chart [chartType]="'Column'" …>

Wijmo Enum Type Properties

Enums in Wijmo are not as difficult to use as standard Angular templates, because Wijmo components allow you to assign the string name of an enum directly to a property. This works because Wijmo components have been built to be able to convert these strings into their numeric enum values.

<wj-flex-chart [chartType]=" 'Column' " …>

However, this approach will still cause issues if you plan to implement two-way binding. For example, say you want to bind a menu to the FlexChart control so that users can change which type of chart is displayed. When using named constants, you may receive an “Expression has changed after it was checked” exception, or a selected menu item may not be displayed by the menu header. In these instances, you’ll still need to associate the enum with a component property:

Component:
chartType = 'Column';

Template:
<wj-flex-chart [itemsSource]="data" [chartType]="chartType" [bindingX]="'country'">
  <wj-flex-chart-series [name]="'Downloads'" [binding]="'downloads'"></wj-flex-chart-series>
</wj-flex-chart>
<wj-menu [(value)]="chartType" [header]="'Chart Type'">
    <wj-menu-item [value]="ChartType.Column">Column</wj-menu-item>
    <wj-menu-item [value]="ChartType.Bar">Bar</wj-menu-item>
    <wj-menu-item [value]="ChartType.Line">Line</wj-menu-item>
    <wj-menu-item [value]="ChartType.Scatter">Scatter</wj-menu-item>
</wj-menu>

The menu item values here are defined as true enum values, and the menu value property is two-way bound to the chart’s chartType property via the component’s chartType property.

Enum Properties in Angular Templates

The whole working example can be found here.

Looking for a set of Angular UI components? Wijmo’s components library has a complete set of Angular UI components, including data grids, charts, gauges, spreadsheets and input controls. You can find out more information about Wijmo’s Angular library here.