Angular Pipes Transforming Data Efficiently

Angular provides a powerful feature called pipes, which allow developers to transform data directly in templates. Pipes are simple yet powerful tools to format, transform, and display data in a way that is user-friendly and consistent. Whether it’s formatting dates, converting text to uppercase, or creating custom transformations, Angular pipes help streamline development.

---

Table of Contents

1. Introduction to Angular Pipes
2. Built-in Angular Pipes
   1. Text Transformation Pipes
   2. Date and Time Pipes
   3. Number and Currency Pipes
   4. Other Useful Built-in Pipes
3. Custom Pipes
   1. Creating a Custom Pipe
   2. Example: Reverse String Pipe
4. Using Pipes in Templates
5. Chaining Pipes
6. Parameterized Pipes
7. Performance Considerations
8. Best Practices
9. Common Mistakes
10. Practical Examples
11. Conclusion

---

1. Introduction to Angular Pipes

A pipe in Angular is a way to transform displayed data in the template without modifying the underlying data in the component. Pipes are represented by the | symbol in Angular templates.

Example:

<p>{{ name | uppercase }}</p>

In this example, the name variable is transformed to uppercase when displayed in the template, but the original name value in the component remains unchanged.

Benefits of Pipes

• Simplifies template logic
• Avoids repetitive code in components
• Provides clean, readable templates
• Supports built-in and custom transformations

---

2. Built-in Angular Pipes

Angular provides several built-in pipes for common transformations, including text formatting, dates, numbers, and currency.

---

2.1 Text Transformation Pipes

1. uppercase: Converts text to uppercase.
2. lowercase: Converts text to lowercase.
3. titlecase: Converts text to title case.

Example:

// app.component.ts
export class AppComponent {
  name: string = 'angular pipes';
}

<p>Original: {{ name }}</p>
<p>Uppercase: {{ name | uppercase }}</p>
<p>Lowercase: {{ name | lowercase }}</p>
<p>Title Case: {{ name | titlecase }}</p>

Output:

• Original: angular pipes
• Uppercase: ANGULAR PIPES
• Lowercase: angular pipes
• Title Case: Angular Pipes

---

2.2 Date and Time Pipes

Angular provides a date pipe to format JavaScript Date objects.

Syntax:

{{ dateValue | date:'format' }}

Common formats:

• 'shortDate' → MM/dd/yyyy
• 'mediumDate' → MMM d, y
• 'fullDate' → EEEE, MMMM d, yyyy
• 'shortTime' → h:mm a

Example:

export class AppComponent {
  birthday: Date = new Date(1990, 4, 15);
}

<p>Short Date: {{ birthday | date:'shortDate' }}</p>
<p>Medium Date: {{ birthday | date:'mediumDate' }}</p>
<p>Full Date: {{ birthday | date:'fullDate' }}</p>
<p>Short Time: {{ birthday | date:'shortTime' }}</p>

Output:

• Short Date: 05/15/1990
• Medium Date: May 15, 1990
• Full Date: Tuesday, May 15, 1990
• Short Time: 12:00 AM

---

2.3 Number and Currency Pipes

Angular provides number and currency pipes to format numeric data.

Number Pipe

<p>{{ 1234.567 | number:'1.2-2' }}</p>

• 1.2-2 means:
  • Minimum integer digits: 1
  • Minimum fraction digits: 2
  • Maximum fraction digits: 2

Output: 1,234.57

Currency Pipe

export class AppComponent {
  price: number = 2500;
}

<p>Price: {{ price | currency:'USD':'symbol' }}</p>
<p>Price in INR: {{ price | currency:'INR':'symbol' }}</p>

Output:

• Price: $2,500.00
• Price in INR: ₹2,500.00

---

2.4 Other Useful Built-in Pipes

1. percent: Converts a number to percentage.

<p>{{ 0.25 | percent }}</p>

Output: 25%

2. json: Converts an object into JSON string.

export class AppComponent {
  person = { name: 'John', age: 30 };
}

<p>{{ person | json }}</p>

Output: {"name":"John","age":30}

3. slice: Extracts a portion of an array or string.

<p>{{ 'Angular Pipes' | slice:0:7 }}</p>

Output: Angular

---

3. Custom Pipes

While built-in pipes cover most use cases, custom pipes allow developers to implement specific transformations.

---

3.1 Creating a Custom Pipe

To create a custom pipe, use the @Pipe decorator and implement the PipeTransform interface.

Syntax:

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

@Pipe({ name: 'pipeName' })
export class CustomPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
// transformation logic here
return transformedValue;
  }
}

---

3.2 Example: Reverse String Pipe

A common example is reversing a string.

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

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
return value.split('').reverse().join('');
  }
}

Use in template:

export class AppComponent {
  name: string = 'Angular';
}

<p>Original: {{ name }}</p>
<p>Reversed: {{ name | reverse }}</p>

Output:

• Original: Angular
• Reversed: ralugnA

---

4. Using Pipes in Templates

Pipes are easy to use in templates. Simply add the | symbol after a variable and provide the pipe name.

<p>{{ birthday | date:'fullDate' }}</p>
<p>{{ amount | currency:'USD':'symbol' }}</p>
<p>{{ text | uppercase }}</p>

Pipes can also accept arguments for additional configuration.

---

5. Chaining Pipes

Angular allows chaining multiple pipes in a single template expression.

Example:

<p>{{ name | uppercase | slice:0:4 }}</p>

If name = 'Angular Pipes', the output will be: ANGU

---

6. Parameterized Pipes

Some pipes accept parameters to customize output. For example:

<p>{{ birthday | date:'dd/MM/yyyy' }}</p>
<p>{{ price | currency:'EUR':'code':'1.2-2' }}</p>

• Date format: 'dd/MM/yyyy'
• Currency: specify currency code, display format, and digits

Custom pipes can also accept multiple parameters:

@Pipe({ name: 'exclaim' })
export class ExclaimPipe implements PipeTransform {
  transform(value: string, symbol: string, times: number): string {
return value + symbol.repeat(times);
  }
}

<p>{{ 'Hello' | exclaim:'!':3 }}</p>

Output: Hello!!!

---

7. Performance Considerations

• Pure vs Impure Pipes: By default, Angular pipes are pure (stateless). They execute only when input changes.
• Impure pipes execute on every change detection cycle, which may affect performance.

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

• Avoid heavy calculations inside pipes; use them only for presentation logic.

---

8. Best Practices

1. Keep pipes pure unless absolutely necessary.
2. Avoid logic-heavy operations inside pipes.
3. Use pipes for display purposes, not for data transformations that affect business logic.
4. Chain pipes for clean and readable templates.
5. Use custom pipes for repeated transformation logic.

---

9. Common Mistakes

1. Forgetting to declare the pipe in app.module.ts.
2. Using impure pipes unnecessarily, affecting performance.
3. Trying to modify the original value in a pipe (pipes should not mutate input).
4. Overusing pipes in complex expressions, which reduces readability.

---

10. Practical Examples

Example 1: Display User List with Pipes

export class AppComponent {
  users = [
{ name: 'Alice', birthday: new Date(1992, 5, 21) },
{ name: 'Bob', birthday: new Date(1988, 10, 10) }
  ];
}

<ul>
  <li *ngFor="let user of users">
Name: {{ user.name | uppercase }}, Birthday: {{ user.birthday | date:'shortDate' }}
  </li>
</ul>

Output:

• Name: ALICE, Birthday: 06/21/1992
• Name: BOB, Birthday: 11/10/1988

Example 2: Custom Reverse Pipe

<p>Reversed Name: {{ 'Angular' | reverse }}</p>

Output: ralugnA

Example 3: Chained Pipes

<p>{{ 'hello world' | uppercase | slice:0:5 }}</p>

Output: HELLO