Angular Pipe Created: 11 Jan 2026 Updated: 11 Jan 2026

Angular Pipes-1

1. Uppercase Pipe (uppercase)

Description: This pipe converts all characters in a string to uppercase. It is useful for headers, labels, or emphasizing specific status codes in a UI.

Code Example:

<h3>{{ title | uppercase }}</h3>

2. Lowercase Pipe (lowercase)

Description: This pipe converts all characters in a string to lowercase. It is frequently used for formatting email addresses or technical keys that must be lowercase for consistency.

<p>Email: {{ email | lowercase }}</p>

3. Titlecase Pipe (titlecase)

Description: This pipe capitalizes the first letter of each word and converts the rest to lowercase. It is ideal for formatting human names or article titles stored as raw text.

Code Example:

<p>Author: {{ author | titlecase }}</p>

4. Date Pipe (date)

Description: This is a highly flexible pipe used to format date objects, timestamps, or ISO strings. It uses pre-defined aliases or custom format strings to meet specific regional requirements.

Detailed Parameters:

  1. 'shortDate': M/d/yy (e.g., 1/11/26)
  2. 'mediumDate': MMM d, y (e.g., Jan 11, 2026)
  3. 'longDate': MMMM d, y (e.g., January 11, 2026)
  4. 'fullDate': EEEE, MMMM d, y (e.g., Sunday, January 11, 2026)
  5. 'shortTime': h:mm a (e.g., 11:55 PM)

Code Example:

<p>Joined: {{ today | date:'longDate' }}</p>
<p>System Log: {{ today | date:'short' }}</p>
<p>Custom Format: {{ today | date:'dd-MM-yyyy HH:mm' }}</p>

5. Currency Pipe (currency)

Description: It transforms numbers into local currency formats. It handles the currency symbol, the grouping separator (commas/periods), and the decimal precision.

Detailed Parameters:

  1. currencyCode: The ISO 4217 code (e.g., 'USD', 'EUR', 'TRY').
  2. display: 'symbol' (default), 'symbol-narrow' (e.g., $ instead of US$), 'code', or 'name'.
  3. digitsInfo: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} (e.g., '1.2-2').

Code Example:

<p>Default: {{ price | currency }}</p> <p>Turkish Lira: {{ price | currency:'TRY':'symbol-narrow':'1.2-2' }}</p> <p>Euro Name: {{ price | currency:'EUR':'name' }}</p> ```

---

## 6. Number (Decimal) Pipe (`number`)
**Description:** Formats a number according to locale rules. It allows you to strictly control how many digits appear before and after the decimal point.

**Detailed Parameters (`digitsInfo`):**
* **minIntegerDigits**: Minimum number of digits before decimal (default: 1).
* **minFractionDigits**: Minimum number of digits after decimal (default: 0).
* **maxFractionDigits**: Maximum number of digits after decimal (default: 3).

**Code Example:**
```html
<p>Short: {{ pi | number:'1.2-2' }}</p> <p>Padded: {{ 42 | number:'4.0-0' }}</p> <p>Precise: {{ pi | number:'1.5-5' }}</p> ```

---

## 7. Percent Pipe (`percent`)
**Description:** This pipe multiplies the input number by 100 and adds a percent sign. Like the decimal pipe, it accepts `digitsInfo` to control precision.

**Code Example:**
```html
<p>Completion: {{ ratio | percent }}</p>
<p>Detailed: {{ ratio | percent:'1.2-2' }}</p>


Share this lesson:

Details

Category
Angular
Sub: Pipe
View All Courses Back to Lessons

Navigation

Progress 13 / 22
Start 59% Complete
Pipe Angular Pipes-2
Statistics
6 Lessons in Pipe
4 SubCategories in Angular
22 Total Lessons in Angular