Data formatting (Angular)link

There are two ways to format data in Radzen Angular applications - via the Property Editor and via code.

Formatting via the Property editorlink

You can open the property editor by clicking the "gear" button next to a property that supports it (e.g. most string properties).

The Property Editor will appear and allow you to pick any of the available page properties and apply formatting.

String formatting

When you pick a string property you can apply the following formatting options: uppercase, lowercase, titlecase. You can also remove formatting.

Number formatting

You can format numeric properties as currency, percent and decimal. All options allow to further customize the formatting options e.g. to specify currency symbol, precision etc.

Date formatting

You can format date properties as UTC and local time. You can also customize the date format - whether it is short or full, whether it includes time or not.

Formatting via codelink

You can also use Angular pipes when setting component properties.

Formatting numbers via code

Currency formatting: ${numberProperty | currency:'USD':true}

Formatting dates via code

• Local date formatting: ${dateProperty | date:"MM/dd/yy"}
• UTC date formatting: ${dateProperty | utcDate:"MM/dd/yy"}

Formatting strings via code

Uppercase: ${stringProperty | uppercase}