TypeScript offers a very convenient feature, Enum:


It 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. For example, we can specify the FlexChart.chartType property value with the following line of code:


chart.chartType = ChartType.Column;

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:



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

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 specific notes


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' " …>

But, this approach may cause problems in 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.



Resources


The whole working example can be found here:


http://plnkr.co/edit/3Leyp7ksKqK4XJFeUxxd?p=preview



Want to try it out yourself with Wijmo? Download Wijmo 5