Data formatting (Angular)
There are two ways to format data in Radzen Angular applications - via the Property Editor and via code.
Formatting via the Property editor
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 code
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}