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 pre installed pipelines 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:... }}

Angular stands out as a liked JavaScript framework for developing web applications. In Angular, the pipe() function plays a vital role in transforming data within templates. It allows you to apply various transformations to data before displaying it in the view. In this article, we will explore more about the pipe() function in Angular.