Pipes in Angular

Angular Pipes are used to transform and format data directly within templates before displaying it to users. They help present data in a readable format without changing the original value. Angular provides several built-in pipes, and developers can also create custom pipes for application-specific transformations.

• Built-in Data Formatting: Angular provides built-in pipes for formatting dates, numbers, currencies, percentages, and text.
• Custom Data Transformation: Developers can create custom pipes to apply reusable transformation logic specific to an application's requirements.

Syntax:

{{ value | pipe1 | pipe2 }}

• value: The input value to be transformed.
• pipe1, pipe2, ..., pipeN: The pipes that transform the input value before displaying it.

Features of the Angular Pipes

Angular pipes provide a variety of features that simplify data formatting and transformation within templates.

• Data Formatting: Pipes have applications for organizing data, like adjusting dates, numbers, currency, and more.
• Data Filtering: Custom pipes can be used to filter or transform data when required.
• Data Transformation: Data can be transformed by pipes using operations like title case, lowercase, and uppercase, among others.
• Localization: Pipes are handy for managing localization and internationalization of data, like translating text or presenting dates in formats.

Types of Pipes in Angular

1. Built-in Pipes

Angular comes equipped with built-in pipes that handle a variety of common formatting duties.

<p>Today's date: {{ today | date:'mediumDate' }}</p>

Lets take a look, at some of the ones that are commonly used.

• DatePipe-The DatePipe is utilized for date formatting. It enables us to present dates, in styles like short, medium and full. For example we can utilize to exhibit the form of the date.

 {{ myDate | date: "short" }} 

• UpperCasePipe - This tool changes a text to capital letters. It requires a text, as input. Gives back the text in all capital letters.

{{ myString | uppercase }}

• LowerCasePipe - This particular pipe is utilized for changing a string to lowercase. Its functionality resembles that of the UpperCasePipe except it changes the string to lowercase instead.

{{ myString | lowercase }}

• CurrencyPipe - This tool helps to convert numbers into currency values. You input a number. It gives back a string showing the number, in the desired currency format.

{{ myNumber | currency: "USD" }}

2. Custom Pipes

When the existing built-in pipes are not enough you can create your customized pipelines. Here is how you can set it up:

• Create a TypeScript class: Decorate the class with @Pipe.
• To use the PipeTransform interface you need to create a transform() method that takes the input value and any additional arguments you specify. In this transform() method you will define the logic, for altering the data.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'Geeks' })
export class GeeksPipe implements PipeTransform {
  transform(value: string, limit: number = 10): string {
    if (value.length > limit) {
      return value.substring(0, limit) + '...';
    }
    return value;
  }
}

<p>{{ longText | geeks:20 }}</p>

In Angular templates, you employ pipes using the pipe operator ( | ) within expressions:

{{ inputValue | pipeName:argument1:argument2:... }}

Steps to use pipe in Angular Application

Step 1: Create a new angular project with the following command.

ng new my-pipe-demo
cd my-pipe-demo

Step 2: Generate a Component using the following command.

ng generate component display-date

Folder Structure

Code Example: Modify the following files with these codes.

<!-- display-date.component.html -->

<p>Today's date (Default format): {{ today }}</p>
<p>Today's date (Short format): {{ today | date:'short' }}</p>
<p>Today's date (Custom format): {{ today | date:'MM/dd/yyyy' }}</p>

// display-date.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-display-date',
    templateUrl: './display-date.component.html',
    styleUrls: ['./display-date.component.css']
})
export class DisplayDateComponent implements OnInit {
    today = Date.now();
}

To start the application run the following command.

ng serve

Output: