Pipes in Angular

Made Using Canva

Here I am again with an interesting topic of Angular I just learned. Angular is a powerful and versatile framework for building web applications. One of its key features is the use of pipes, which allow you to transform and format data directly in your templates. In this article, we’ll take an in-depth look at pipes in Angular, how to use built-in pipes, and how to create custom pipes to meet your application’s specific needs.

Understanding Pipes

Pipes in Angular are a way to perform data transformations within the template, without changing the actual data in the component. They take in data as input, apply a transformation, and then display the modified data in the template.

Pipes are used with the |symbol in the template syntax, followed by the name of the pipe and any optional parameters. Here’s a basic example using the date pipe to format a date:

<p>{{ myDate | date:'shortDate' }}</p>

In this example, myDate is a JavaScript Date object, and the date pipe is used to format it as a short date.

Built-in Pipes

Angular provides a variety of built-in pipes for common tasks such as formatting dates, numbers, and manipulating strings. Here are some commonly used built-in pipes:

1. DatePipe: Formats dates. For example, you can display a date as ‘shortDate’, ‘mediumDate’, or ‘fullDate’.

2. DecimalPipe: Formats numbers, including options for specifying decimal places and digit grouping.

3. UpperCasePipe and LowerCasePipe: Convert strings to uppercase or lowercase.

4. CurrencyPipe: Formats numbers as currency values, with options for specifying currency code and formatting.

5. PercentPipe: Formats numbers as percentages.

6. JsonPipe: Converts an object to a JSON string for debugging.

7. SlicePipe: Returns a slice of an array or string.

These built-in pipes can save you a lot of time and effort when it comes to displaying data in a user-friendly way.

Creating Custom Pipes

While the built-in pipes cover many common use cases, you’ll often encounter situations where you need a custom transformation. Creating custom pipes in Angular is straightforward.

Get Riya Sharma’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Here’s a step-by-step guide to creating a custom pipe:

Step 1: Generate a New Pipe

You can use the Angular CLI to generate a new pipe. Open your terminal and run the following command:

ng generate pipe prefix

This command will generate a new pipe file (prefix.pipe.ts) and add it to your app’s module declarations.

Step 2: Implement the Pipe

In the generated pipe file, you’ll find a class with the PipeTransform interface. This interface requires you to implement a transform method, which performs the actual data transformation. Here’s an example of a custom pipe that adds a prefix to a string:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
 name: 'prefix'
})
export class PrefixPipe implements PipeTransform {
 transform(value: string, prefix: string = 'Default'): string {
 return `${prefix}: ${value}`;
 }
}

Step 3: Use the Custom Pipe

Once you’ve created your custom pipe, you can use it in your templates just like any built-in pipe. Here’s an example of using the prefix pipe:

<p>{{ 'Hello, World!' | prefix:'Custom Prefix' }}</p>

This will display “Custom Prefix: Hello, World!”.

Chaining Pipes

You can chain multiple pipes together to perform more complex transformations. For example:

<p>{{ price | currency:'USD':true:'1.2–2' | lowercase }}</p>

In this example, we first use the currencypipe to format a price and then the lowercase pipe to convert it to lowercase.

Conclusion

Pipes in Angular are a powerful tool for transforming and formatting data in your templates. While Angular provides a set of built-in pipes for common tasks, you can easily create custom pipes to handle unique requirements in your application. By mastering pipes, you can make your templates more expressive and user-friendly, providing a better experience for your application’s users. If this blog helped, do give a clap and follow. Thank you, Happy Coding! ✨

Thank you for reading until the end. Please consider following the writer and this publication. Visit Stackademic to find out more about how we are democratizing free programming education around the world.