Expressions (Angular)

Expressions are snippets enclosed in a ${} block. Radzen uses expressions to display a suggestion list of the available properties (page properties and implicit properties). Expressions also allow Radzen to provide similar experience when using component properties (that render as Angular component attributes) and event handlers (which are generated as TypeScript code).

Here are a few examples:

• ${event.OrderID} - access a property of the event argument
• ${getOrdersResult} - get the value of the getOrdersResult page property
• ${new Date()} - use TypeScript code to initialize a new Date object
• ${parameters.ID} - get the ID page parameter
• ${security.isInRole('Admin')} - check if the current user is a member of the Admin role.

You can use expressions in the event editor (when handling events) and the property grid (when setting component properties).

Implicit properties

Radzen provides context specific (a.k.a. implicit) properties in its suggestion box. Those provide context-aware info - event argument, page parameters, template data item.

event

The event implicit property is available in the event editor. It represents the argument of the current event. For example the RowClick event of the DataGrid provides the current data item as ${event}. Thus one can access the data item properties like this ${event.OrderID}.

result

The result implicit property is available in the Then and Error events of the Invoke data source method, Invoke custom method, Execute Code and Open Dialog actions. It represents the result of the action. You can access the properties of the result like this ${result.value}.

data

The data implicit property is available in component templates. It represents the current data item. Again you can access the properties of the template data item like this ${data.OrderID}.

parameters

The parameters implicit property contains the parameters which the current page has been open with (either via the Open dialog or Navigate to page actions). Each parameter is available as a property of parameters - ${parameters.ID}.

security

The security implicit property is a reference to the Radzen Security service.

locale

The locale implicit property represents the currently selected language code e.g. en-US, de-DE.

Using code in expressions

You can use TypeScript code in expressions: ${getOrdersResult.filter(o => o.OrderID > 10)}, ${parameters.Name.substring(0, 1)}.

Some restrictions apply though. When setting a component property from the property grid you can only use TypeScript constructs that are supported by the Angular template compiler. Here are some of those restrictions:

• you cannot access JavaScript global objects - window, document, navigator.
• you cannot instantiate new objects - new Date().
• you cannot use method calls when setting the Value property of a component.

Those restrictions do not apply when using expressions in event handlers.

Omitting the ${} block

One can omit the ${} block but has to be careful. Page properties in event handlers should be prefixed with this - this.getOrdersResult. To be on the safe side prefer using ${} which Radzen knows how to transform for the right target - .ts or .html file.