Using TypeScript Enums in Angular Templates

October 19 2023

Enum is a convenient feature offered by TypeScript. Enum allows you to specify a possible property value from a predefined set of values using meaningful names, instead of the numeric constants that are usually used in this case.

In Wijmo components, we use Enums for certain properties to make the development easier. In our Angular DataGrid, we can easily set the selectionMode property from a predefined list of options. For another example, we can specify the FlexChart.chartType property value with the following line of code:

chart.chartType = ChartType.Column;

Ready to Get Started? Download Wijmo Now!

Enums in Angular

But, the problem with Enum type properties arises in Angular templates, where you may want to specify their values, but can’t. The only way is to use numeric constants corresponding to the enum members, but this approach produces unclear markup, and it might be annoying to figure out their values:

chart.chartType = ChartType.Column;

The source of the problem is that it is impossible to reference anything except for the component properties in Angular template expressions. But, the properties are still available, so let’s utilize this! We can just add a property that stores a reference to the necessary Enum type, like the ChartType property here:

import * as wjcChart from 'wijmo/wijmo.chart'; 
…
export class AppCmp {
    ChartType = wjcChart.ChartType;

And now we can reference enum members in template bindings:

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

Wijmo enum type properties

Note that this problem is not so acute when it comes to Wijmo components, where you can assign the string name of an enum member to a property. This approach will work because all Wijmo enum type properties can convert such strings to actual enum values. For example:

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

However, this approach may cause problems in the case of two-way binding scenarios. If you want to bind a menu of possible chart types to the chart’s chartType property, for example. You may get one of those lovely “Expression has changed after it was checked” exceptions or a selected menu item will not be shown in the menu header. The code that uses true enum values is free of these potential problems:

Component:
chartType = wjcChart.ChartType.Column;

Template:
<wj-flex-chart [itemsSource]="data"
               [chartType]="chartType"
               [bindingX]="'country'"
               style="height: 200px">
    <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.Scatter">Scatter</wj-menu-item>
    <wj-menu-item [value]="ChartType.Line">Line</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 values charttype