Pipes and Data Formatting

Level: Beginner

ℹ️ What You'll Learn

• Built-in pipes (date, currency, uppercase, etc)
• Pipe parameters
• Custom pipes
• Combining pipes
• Async pipe

Built-in Pipes

<!-- Date -->
{{ student.dateOfBirth | date }}
{{ student.dateOfBirth | date:'short' }}
{{ student.dateOfBirth | date:'dd/MM/yyyy' }}

<!-- Currency -->
{{ fee.amount | currency }}
{{ fee.amount | currency:'INR' }}

<!-- Uppercase/lowercase -->
{{ student.name | uppercase }}
{{ student.email | lowercase }}

<!-- Number -->
{{ percentage | number:'2.2-2' }}

<!-- Percent -->
{{ score / 100 | percent }}

<!-- Slice -->
{{ students | slice:0:5 }}

<!-- JSON (debug) -->
{{ student | json }}

Custom Pipe

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

@Pipe({
  name: 'highlight',
  standalone: true
})
export class HighlightPipe implements PipeTransform {
  transform(value: string, highlight: string): string {
    if (!value || !highlight) return value;
    return value.replace(new RegExp(highlight, 'gi'), 
      `<mark>${highlight}</mark>`);
  }
}

Use:

{{ student.name | highlight:'Kumar' }}

Combining Pipes

<!-- Multiple pipes in sequence -->
{{ student.dateOfBirth | date:'short' | uppercase }}

{{ fee.amount | currency | uppercase }}

Pipes chain left to right.

SMS Examples

<!-- Student list with formatting -->
<tr *ngFor="let student of students">
  <td>{{ student.rollNumber | uppercase }}</td>
  <td>{{ student.name }}</td>
  <td>{{ student.dateOfBirth | date:'dd/MM/yyyy' }}</td>
  <td>
    <span [class]="'status-' + (student.status | lowercase)">
      {{ student.status }}
    </span>
  </td>
</tr>

<!-- Fee management -->
<div>
  Total Fees: {{ totalFees | currency:'INR' }}
  Paid: {{ paidFees | currency:'INR' }}
  Percentage: {{ (paidFees / totalFees) | percent:'1.0-0' }}
</div>

<!-- Date display -->
<p>Last Updated: {{ lastUpdated | date:'medium' }}</p>

Async Pipe

<div>{{ students$ | async | json }}</div>

<div *ngIf="(studentDetail$ | async) as student">
  {{ student.name }}
</div>

Subscribes and unsubscribes automatically.

Key Takeaways

• Pipes = format data in templates
• Built-in pipes: date, currency, uppercase, etc
• Custom pipes with @Pipe decorator
• Combine pipes with | operator
• Async pipe for Observables
• Prevent memory leaks with async pipe

💡 Backend Developer Tip

Pipes similar to String.Format in C#. Use for display formatting, not business logic.

⚠️ Pipe Issues

1. Formatting in component — Use pipes in template
2. Custom pipe not imported — Add to module or standalone
3. Complex logic in pipe — Keep pipes simple
4. Performance — Pure pipes vs impure pipes

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on Angular Pipes. Try these prompts:

• "Why use pipes instead of component logic?"
• "How do you create custom pipes?"
• "What's benefit of async pipe?"
• "Quiz me on pipes"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.