Click here to Skip to main content
14,643,812 members
Articles » Third Party Products » Product Showcase » General
Article
Posted 8 Sep 2020

Stats

4.1K views

Using TypeScript Enums in Angular Templates

8 Sep 2020CPOL
In this article we look at the issue arises when using Enum type properties in Angular templates.
Here we look at Enums in Angular, and Wijmo Enum Type Properties (with a special consideration for implementing two-way binding).

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Alex Ivanenko
United States United States
Alex Ivanenko brings more than 30 years of experience in the software industry to the Wijmo Program Manager role. He graduated from Lomonosov Moscow State University with a Master degree in Applied Mathematics and Cybernetics. Alex enjoys working with people of different cultures and backgrounds, as well as technical experience at GrapeCity. When he isn't managing a new Wijmo project, you can find him traveling, fishing, or picking mushrooms.

Comments and Discussions

 
-- There are no messages in this forum --