Skip to main content
Angular Basics
CHAPTER 08 Beginner

Pipes in Angular

Updated: May 18, 2026
5 min read

# CHAPTER 8

Pipes in Angular

1. Chapter Introduction

A Pipe transforms data directly inside an Angular template without needing to modify the original data or write transformation functions in the component class. Need to format 1234567 as $1,234,567.00? Or display 2024-01-15 as January 15, 2024? Angular Pipes do this in a single character — the pipe symbol |.

2. Learning Objectives

  • Use built-in pipes: uppercase, lowercase, date, currency, number, json.
  • Chain multiple pipes together.
  • Create a custom pipe using ng generate pipe.

3. Built-in Pipes

typescript
1234567 
export class ProductComponent {
  productName: string = 'angular framework guide';
  price: number = 1234.567;
  launchDate: Date = new Date('2024-03-15');
  discount: number = 0.25;
  productData = { id: 1, name: 'Laptop', inStock: true };
}
html
123456789101112131415161718 
<!-- Text Transformation -->
<p>{{ productName | uppercase }}</p>     <!-- ANGULAR FRAMEWORK GUIDE -->
<p>{{ productName | titlecase }}</p>     <!-- Angular Framework Guide -->

<!-- Number & Currency -->
<p>{{ price | number:&#039;1.2-2' }}</p>      <!-- 1,234.57 -->
<p>{{ price | currency:&#039;USD' }}</p>      <!-- $1,234.57 -->
<p>{{ discount | percent }}</p>          <!-- 25% -->

<!-- Date -->
<p>{{ launchDate | date:&#039;longDate' }}</p>  <!-- March 15, 2024 -->
<p>{{ launchDate | date:&#039;dd/MM/yyyy' }}</p><!-- 15/03/2024 -->

<!-- Debug: JSON pipe shows entire objects -->
<pre>{{ productData | json }}</pre>

<!-- Async Pipe (for Observables) -->
<p>{{ userData$ | async }}</p>

4. Chaining Pipes

You can chain pipes using multiple | symbols. They process left to right.
html
12 
<p>{{ productName | uppercase | slice:0:10 }}</p>
<!-- Result: ANGULAR FR -->

5. Custom Pipes

Let's build a shorten pipe that truncates text to a given length.
bash
1 
ng g pipe shorten
shorten.pipe.ts
1234567891011121314 
import { Pipe, PipeTransform } from &#039;@angular/core&#039;;

@Pipe({
  name: &#039;shorten&#039;
})
export class ShortenPipe implements PipeTransform {
  // 'value' = the data to transform, 'limit' = our custom argument
  transform(value: string, limit: number = 50): string {
    if (value.length > limit) {
      return value.substring(0, limit) + &#039;...&#039;;
    }
    return value;
  }
}
html
12 
<!-- Using the custom pipe with an argument -->
<p>{{ longDescription | shorten:30 }}</p>

6. Pure vs Impure Pipes

  • Pure Pipe (Default): Only recalculates when the input reference changes. Very performant.
  • Impure Pipe: Recalculates on every change detection cycle. Use only when absolutely necessary as it is expensive.
typescript
12 
@Pipe({ name: &#039;filter&#039;, pure: false }) // Impure pipe
export class FilterPipe implements PipeTransform { ... }

7. Common Mistakes

  • Modifying data in the template: Pipes should only format data for display, not modify the actual source array or variable.
  • Using impure pipes on large datasets: An impure pipe runs on every change detection cycle, which can cause severe performance issues in lists with hundreds of items.

8. MCQs with Answers

Q1. What symbol is used to apply a pipe in an Angular template? a) @ b) # c) | Answer: c) |.

Question 2

Which pipe transforms text to uppercase?

Question 3

Which pipe formats a number as a currency?

Question 4

How do you create a custom pipe?

Question 5

What interface must a custom pipe class implement?

Question 6

Which pipe is used to display JavaScript objects for debugging?

Q7. Can you chain multiple pipes on a single value? a) No b) Yes, using the | symbol multiple times Answer: b) Yes.
Question 8

Which pipe automatically subscribes to an Observable and displays its value?

Question 9

What is the key difference between a pure and impure pipe?

Question 10

What is the date pipe format string for "January 15, 2024"?

9. Interview Questions

  • Q: What is the difference between a pure and impure pipe? Give a use case for each.
  • Q: How would you build a custom pipe to filter a list of products by category?

10. Summary

Pipes are Angular's elegant solution for transforming display values without polluting component logic. They are reusable, chainable, and composable. The async pipe is particularly powerful as it automatically handles Observable subscriptions and unsubscriptions, preventing memory leaks.

11. Next Chapter Recommendation

Components should not fetch data themselves. In Chapter 9: Angular Services and Dependency Injection, we will create a dedicated data layer using Services and learn how Angular's DI system wires them into components automatically.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Directives in Angular
Next Chapter Angular Services and Dependency Injection

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1