Angular is a popular framework used for developing dynamic, single-page applications. One of the standout features of Angular is its ability to transform data effortlessly using Pipes. In this post, we will explore Angular Pipes and demonstrate how to create Custom Pipes to tailor them to your specific application requirements.

What are Angular Pipes?

Pipes in Angular are simple functions that accept an input value and return a transformed value. They are primarily used in the template to format data displayed to the user. This makes the presentation of data neat and user-friendly.

Built-In Pipes

Angular provides a wide range of built-in pipes that cater to common formatting needs. Here are a few commonly used pipes:

1. DatePipe: Transforms date objects into formatted date strings.

   <p>{{ today | date:'fullDate' }}</p>

   Here, today could be a Date object, and the output will display the full date format as defined by Angular.

2. CurrencyPipe: Formats a number as a currency value.

   <p>{{ price | currency:'USD':true }}</p>

   This will convert the variable price to US dollars, complete with the currency symbol.

3. DecimalPipe: Used for formatting numbers.

   <p>{{ pi | number:'1.1-2' }}</p>

   This would format the variable pi to at least one digit before the decimal and shows up to two digits after the decimal.

Chaining Pipes

One of the powerful aspects of using pipes is that they can be chained together to apply multiple transformations to the same data.

<p>{{ amount | currency:'USD' | uppercase }}</p>

In this example, amount is first converted to US dollars, and then the output is transformed to uppercase.

Creating Custom Pipes

While built-in pipes cover many scenarios, there will be times when you need something specific. Angular allows you to create custom pipes to achieve exactly that.

How to Create a Custom Pipe

Creating a custom pipe is straightforward. You need to implement the PipeTransform interface and register your pipe using the @Pipe decorator.

Below are the steps to create a custom pipe that converts text to title case.

1. Generate the Pipe: You can generate a pipe using the Angular CLI:

   ng generate pipe titleCase

2. Implement the Pipe: Open the generated title-case.pipe.ts and implement the transformation logic.

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({
       name: 'titleCase'
   })
   export class TitleCasePipe implements PipeTransform {
       transform(value: string): string {
           if (!value) return value;
           return value
               .toLowerCase()
               .split(' ')
               .map(word => word.charAt(0).toUpperCase() + word.slice(1))
               .join(' ');
       }
   }

   In this code, the transform method splits the string into words, capitalizes the first letter of each word, and then joins them back into a string.

3. Using the Custom Pipe: After creating the pipe, you can use it in your template as follows:

   <p>{{ 'hello world from angular' | titleCase }}</p>

   This will output: Hello World From Angular.

Pipe Configuration

You can also configure your pipe to accept additional parameters.

For instance, if you want a custom pipe that truncates text to a certain length, you could add an argument to your transform function:

@Pipe({
   name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
   transform(value: string, limit: number = 100): string {
       return value.length > limit ? value.substring(0, limit) + '...' : value;
   }
}

And use it as follows:

<p>{{ longText | truncate:50 }}</p>

Pure vs Impure Pipes

By default, user-defined pipes in Angular are pure. This means they will only re-evaluate when the input reference changes. If you want a pipe to re-evaluate frequently regardless of input changes, you can set it as impure. Just add pure: false to the @Pipe decorator. Be cautious with impure pipes since they can lead to performance issues if overused.

@Pipe({
   name: 'impurePipe',
   pure: false
})

Final Thoughts

Angular Pipes provide an elegant solution for transforming data in templates, enhancing the user interface with minimal effort. By understanding both built-in and custom pipes, you can tailor your application to present data in exactly the format needed.

As you explore Angular development, don't hesitate to leverage Pipes to keep your templates clean and efficient while catering to your application's unique requirements!