From 1cd8b66cc713efcec5aeb6c7f89fdb59be402d5f Mon Sep 17 00:00:00 2001 From: tomfacal <88186642+tomfacal@users.noreply.github.com> Date: Wed, 19 Mar 2025 12:53:54 +0100 Subject: [PATCH 1/2] added pipes doc --- docs/guide/19-pipes.md | 172 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 docs/guide/19-pipes.md diff --git a/docs/guide/19-pipes.md b/docs/guide/19-pipes.md new file mode 100644 index 000000000..6b7aaf1dd --- /dev/null +++ b/docs/guide/19-pipes.md @@ -0,0 +1,172 @@ +--- +layout: default +title: "Pipes" +permalink: /guide/pipes/ +parent: Guide +nav_order: 6 +--- + +{% include base_path %} +{% include toc %} + +This section describes the **OntimizeWeb** pipes an how to use them. + +# **OntimizeWeb** Pipes + +Pipes in Angular are used to transform data before it is displayed in the view. **OntimizeWeb** provides several pipes designed to transform different types of data, such as monetary values, icons, integers, and dates. Below is an overview of each available pipe. + +--- + +## **oCurrency** +**Description:** +This pipe is designed to format numeric values into a currency format, allowing customization of details such as currency symbol, symbol position, decimal digits, and thousand/decimal separators. + +**Parameters:** +- **currencySimbol:** Currency symbol (e.g., "$", "€"). +- **currencySymbolPosition:** Position of the currency symbol, can be "left" or "right". +- **grouping:** Indicates whether to group thousands. +- **thousandSeparator:** The separator for thousands (e.g., ","). +- **decimalSeparator:** The separator for decimals (e.g., "."). +- **minDecimalDigits:** Minimum number of decimal digits. +- **maxDecimalDigits:** Maximum number of decimal digits. + +**Example:** + +```html +{{ 1234.56 | oCurrency: { currencySimbol: '$', currencySymbolPosition: 'before', thousandSeparator: ',', decimalSeparator: '.', minDecimalDigits: 2, maxDecimalDigits: 2 } }} +``` + +## **oIcon** + +**Description:** +The `oIcon` pipe transforms the text value into a specific icon, using the provided parameters. It is useful when you want to display icons instead of text or when you need to incorporate representative images in the user interface. + +**Parameters:** + +- **iconPosition:** Position of the icon within the container, can be "left" or "right". +- **icon:** Name of the icon to display. + +**Example:** + +```html + +``` + +## **oInteger** + +**Description:** +The `oInteger` pipe is used to format integer numbers. It can add thousand separators, handle locales, and manage how numbers are grouped. This is useful for displaying large numbers in a more readable format. + +**Parameters:** + +- **grouping:** Indicates if thousands should be grouped. +- **thousandSeparator:** The separator for thousands (e.g., ","). +- **locale:** The locale to use for number localization. + +**Example:** + +```html +{{ 1234567 | oInteger:{ grouping: true, thousandSeparator: ',' } }} +``` + +## **oMoment** + +**Description:** +The `oMoment` pipe is used to format dates into a readable format. It allows customization of the date format based on user requirements. This pipe utilizes the `MomentService` to parse and format the date value. + +**Parameters:** + +- **format:** The desired date format (e.g., `"YYYY-MM-DD"`, `"MM/DD/YYYY"`). + +**Example:** +```html +{{ '2025-03-19T12:00:00Z' | oMoment:{ format: 'MM/DD/YYYY' } }} +``` + +## **oPercent** + +**Description:** +The `oPercent` pipe is used to format numbers as percentages. It provides options for grouping thousands, setting decimal separators, and defining the base value for percentage calculations. + +**Parameters:** + +- **grouping:** Indicates whether thousands should be grouped. +- **thousandSeparator:** The separator for thousands (e.g., `","`). +- **locale:** The locale used for number localization. +- **decimalSeparator:** The separator for decimal values (e.g., `"."`). +- **minDecimalDigits:** Minimum number of decimal places. +- **maxDecimalDigits:** Maximum number of decimal places. +- **valueBase:** The base value for percentage calculations (`1` or `100`). + +**Example:** + +```html +{{ 0.85 | oPercent:{ grouping: true, thousandSeparator: ',', decimalSeparator: '.', minDecimalDigits: 2, maxDecimalDigits: 2, valueBase: 100 } }} +``` + +## **oReal** + +**Description:** +The `oReal` pipe is used to format real (floating-point) numbers. It allows customization of separators, decimal places, and number grouping. + +**Parameters:** + +- **grouping:** Indicates whether thousands should be grouped. +- **thousandSeparator:** The separator for thousands (e.g., `","`). +- **locale:** The locale used for number localization. +- **decimalSeparator:** The separator for decimal values (e.g., `"."`). +- **minDecimalDigits:** Minimum number of decimal places. +- **maxDecimalDigits:** Maximum number of decimal places. +- **truncate:** Indicates whether to truncate extra decimal digits. + +**Example:** + +```html +{{ 1234.567 | oReal:{ grouping: true, thousandSeparator: ',', decimalSeparator: '.', minDecimalDigits: 2, maxDecimalDigits: 3, truncate: true } }} +``` + +## **oTranslate** + +**Description:** +The `oTranslate` pipe is used to translate text based on the current language. It automatically updates the translated text when the language changes. The pipe works by subscribing to the `onLanguageChanged` event from the `OTranslateService`. + +**Parameters:** + +- **text:** The text to be translated. +- **args:** An optional argument that can include values to replace placeholders in the translation string (e.g., `values: ['value1', 'value2']`). + +**Example:** + +```html +{{ 'hello' | oTranslate:{ values: ['world'] } }} +``` + +## **orderBy** + +**Description:** +The `orderBy` pipe is used to sort an array based on the values of a given property or multiple properties. It allows sorting in ascending or descending order. The pipe can handle both simple arrays and arrays of objects with specified properties. + +**Parameters:** + +- **input:** The array to be sorted. +- **config:** An optional array that defines the properties to sort by. Each element in the array can be: + - A string representing a property to sort by, with an optional `+` (ascending) or `-` (descending) sign (e.g., `+property`, `-property`). + - If not provided, the default behavior is to sort the array alphabetically or numerically. + +**Example:** + +```html + +{{ [3, 1, 2] | orderBy }} + + +{{ [{name: 'John'}, {name: 'Jane'}] | orderBy:'name' }} + + +{{ [{name: 'John', age: 30}, {name: 'Jane', age: 25}] | orderBy:'-age' }} + + +{{ [{name: 'John', age: 30}, {name: 'Jane', age: 25}] | orderBy:['-age', 'name'] }} +``` + + From 07596adffb988b23c3ecbc553595483927612dc9 Mon Sep 17 00:00:00 2001 From: tomfacal <88186642+tomfacal@users.noreply.github.com> Date: Thu, 20 Mar 2025 10:16:31 +0100 Subject: [PATCH 2/2] updated errors --- docs/guide/19-pipes.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/guide/19-pipes.md b/docs/guide/19-pipes.md index 6b7aaf1dd..2b288147c 100644 --- a/docs/guide/19-pipes.md +++ b/docs/guide/19-pipes.md @@ -32,10 +32,14 @@ This pipe is designed to format numeric values into a currency format, allowing **Example:** + ```html +{% raw %} {{ 1234.56 | oCurrency: { currencySimbol: '$', currencySymbolPosition: 'before', thousandSeparator: ',', decimalSeparator: '.', minDecimalDigits: 2, maxDecimalDigits: 2 } }} +{% endraw %} ``` + ## **oIcon** **Description:** @@ -66,7 +70,9 @@ The `oInteger` pipe is used to format integer numbers. It can add thousand separ **Example:** ```html +{% raw %} {{ 1234567 | oInteger:{ grouping: true, thousandSeparator: ',' } }} +{% endraw %} ``` ## **oMoment** @@ -80,7 +86,9 @@ The `oMoment` pipe is used to format dates into a readable format. It allows cus **Example:** ```html +{% raw %} {{ '2025-03-19T12:00:00Z' | oMoment:{ format: 'MM/DD/YYYY' } }} +{% endraw %} ``` ## **oPercent** @@ -101,7 +109,9 @@ The `oPercent` pipe is used to format numbers as percentages. It provides option **Example:** ```html +{% raw %} {{ 0.85 | oPercent:{ grouping: true, thousandSeparator: ',', decimalSeparator: '.', minDecimalDigits: 2, maxDecimalDigits: 2, valueBase: 100 } }} +{% endraw %} ``` ## **oReal** @@ -122,7 +132,9 @@ The `oReal` pipe is used to format real (floating-point) numbers. It allows cust **Example:** ```html +{% raw %} {{ 1234.567 | oReal:{ grouping: true, thousandSeparator: ',', decimalSeparator: '.', minDecimalDigits: 2, maxDecimalDigits: 3, truncate: true } }} +{% endraw %} ``` ## **oTranslate** @@ -138,7 +150,9 @@ The `oTranslate` pipe is used to translate text based on the current language. I **Example:** ```html +{% raw %} {{ 'hello' | oTranslate:{ values: ['world'] } }} +{% endraw %} ``` ## **orderBy** @@ -156,6 +170,7 @@ The `orderBy` pipe is used to sort an array based on the values of a given prope **Example:** ```html +{% raw %} {{ [3, 1, 2] | orderBy }} @@ -167,6 +182,7 @@ The `orderBy` pipe is used to sort an array based on the values of a given prope {{ [{name: 'John', age: 30}, {name: 'Jane', age: 25}] | orderBy:['-age', 'name'] }} +{% endraw %} ```