Properties (Angular)

There are two kind of properties in Radzen - page properties and component properties.

Page properties

Page properties store application data: the result of a database query, user input (the text your users type), or any other data needed by the developer.

Component properties

Component properties configure the behavior - the text that a Button displays, the items of a DataGrid.

Component properties can be set to page properties. In this case we say that the component property is data-bound to a page property.

Create property

To create a page property handle the Load event of the current page and use the Set property action. You must set the property Name (so you can refer to it later) and Value.

1. Open a page in Radzen (or create a new one).
2. Click on an empty space in the designer or pick Page from the Selection dropdown. This reveals the Page Events in the property grid.
3. Add a new event handler of the Load event. It triggers when the page is displayed initially.
4. Set the Type of the action to Set property.
5. Give the property a Name and some Value. For example set Name to counter and Value to 0. This creates the counter property and sets its value to zero.

Property name restrictions

A page property maps to a TypeScript class field in Angular applications. Thus it obeys to certain naming restrictions:

1. Cannot start with a number.
2. Cannot contain a whitespace.
3. Cannot be named after a TypeScript or JavaScript language keyword: new, class, function etc.
4. Cannot be named after an existing data source (data sources are defined as properties implicitly).
5. Cannot be named after an existing component (components are also defined as properties implicitly).

Display property value

A common task is to display a property value to your application users. In Radzen this is done by data-binding a component property to a page property.

The Label component can display a text or number property (like the one we created in the Create property section).

1. Drag a Label component from the toolbox and drop it after the title of the page.
2. Click the ‘link’ button next to the Text property. This opens the Property picker dialog.
3. Select the counter property and click OK. This sets the Text property of the label to ${counter}. Now the Text of the Label component is data-bound to the counter page property. If the counter property changes the text of the label will update and display the latest value.

But what is this ${counter} syntax? This is called an expression.

Expressions have a few important usages:

1. Allow Radzen to display a suggestion box with available property names.
2. Enable Radzen to generate the right code regardless of context (.ts or .html files).
3. Hide some of the specifics of the target framework.

The example above produces the following Angular code when you run the application: <rz-label [text]="counter"></rz-label>

The Expressions article contains more info about expressions.

Update property value

To update the value of a property you have to use the Execute Code action. Let’s add a Button which updates the property value. The counter property will increment whenever the user clicks the button.

1. Drag a Button component from the toolbox and drop it after the Label from the Display property value.
2. Set the Text property of the Button to Increment. Note that we did not use ${Increment} this time. We set the Text of the button to the literal value Increment.
3. Handle the Click event of the button. Add a new action of type Execute Code.
4. Set Code to ${counter} = ${counter} + 1;

Run the application. Clicking the button increments the counter property and the label displays its current value. This happens because the Text of the Label is data-bound to the counter property via the ${counter} expression.

The ${counter} = ${counter} + 1 expression is what increments the value of the counter property. It generates the following TypeScript code this.counter = this.counter + 1.

So far we have used two kinds of actions - Set property and Execute JavaScript code. More info about them and the other action types supported by Radzen is available in the Event handling article.

Get user input

Getting the user input in a page property is another common task in Radzen applications. The component that can do that are: TextBox, Numeric, DropDown et. al.

The following example shows how to store the text the user types in a page property.

First add a page property that will store the text.

1. Perform steps 1 - 3 from Create property.
2. Set Name to text and Value to ''. This creates a new page property called text whose value is '' (empty string).

Then add a TextBox component and data-bind its Value property to the text page property that you just created. The Value property of input components (such as the TextBox) is special. It updates the page property it is data-bound to when the user changes the component value (e.g. types something in the TextBox).

1. Drag a TextBox component and drop it after the page title.
2. Click the gear icon next to the Value property to ppen the **Property picker **.
3. Select the text property. This data-bounds the Value of the TextBox to the text property of the page.

Let’s also display what the user typed!

1. Drag a Button component and drop it after the TextBox.
2. Set the Text of the Button to Show text.
3. Add a new handler of the Click event.
4. Set Type to Show notification.
5. Set Severity to info and Summary to You entered: ${text}.

Clicking the button displays the value of the text property. Let’s run the application.

Get data from a data source

Getting data from a data source (database or other) and displaying it to your users is another common task. While scaffolding and the New Page wizard facilitate this a lot let’s see what they do under the hood.

Use the Radzen sample data source by following the instructions from the Quickstart

Then invoke a method of the data source and store its result in a page property.

1. Add a new handler of the page Load event.
2. Set Type to Invoke data source method, Operation to getOrders.
3. Handle the Then event with a Set property action. Set Name to orders and Value to ${result.value}. This will store the response of the getOrders data source method (available as the result implicit property) in the orders property. OData services return the actual result inside a value property of the response hence we use ${result.value}.

When the page loads it will invoke the getOrders method and then set the orders property to the response.

Let’s show the orders in a DataGrid component.

1. Drag a DataGrid component from the toolbox.
2. Set its Data property to orders. This data-binds the Data property of the DataGrid to the orders page property - if the latter changes the DataGrid will update accordingly.
3. Find the Columns property of the DataGrid. Click the Autogenerate button to generate a column for every property of the Order entity.

When you run the application you should see a DataGrid showing all orders.

Since showing data in a DataGrid is a very common requirement Radzen offers a few shortcuts:

• The New Page wizard has a CRUD template. It creates a three pages - one displays data in a DataGrid, one is for inserting new data items and one for editing existing ones.
• Scaffolding allows Radzen Professional and Enterprise users to create a working CRUD application for an entire database.
• Finally the Data property editor of the DataGrid allows you to quickly specify the data-source method that provides the data items.