Angular Pipes Example (Built-in Pipes with Examples)

📌 INTRODUCTION

Angular Pipes are used to transform data in templates before displaying it to the user.

Instead of modifying data in the component, pipes allow you to format it directly in HTML.

Angular provides several built-in pipes such as:

• Uppercase
• Lowercase
• Date
• Currency
• Percentage

👉 Pipes make your UI cleaner and more readable.

---

📘 PROBLEM STATEMENT

👉 Write a program to demonstrate Angular pipes.

---

💡 CONCEPTS USED

• Angular Pipes
• Built-in Pipes
• Data Transformation
• Template Binding

---

🧠 LOGIC EXPLANATION

The program works as follows:

1. Define data in the component
2. Use pipes in HTML template
3. Transform data using | (pipe operator)
4. Display formatted output

---

💻 PROGRAM CODE

---

Step 1: Update app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  name = 'Kanchan';
  today = new Date();
  salary = 95000;
  percentage = 0.85;
}

---

Step 2: Update app.component.html

<h1>Angular Pipes Example</h1>

<p><strong>Original Name:</strong> {{ name }}</p>
<p><strong>Uppercase:</strong> {{ name | uppercase }}</p>
<p><strong>Lowercase:</strong> {{ name | lowercase }}</p>

<p><strong>Today Date:</strong> {{ today }}</p>
<p><strong>Formatted Date:</strong> {{ today | date:'fullDate' }}</p>

<p><strong>Salary:</strong> {{ salary }}</p>
<p><strong>Currency:</strong> {{ salary | currency:'INR' }}</p>

<p><strong>Percentage:</strong> {{ percentage }}</p>
<p><strong>Formatted Percentage:</strong> {{ percentage | percent }}</p>

---

🖥️ OUTPUT

Angular Pipes Example

Original Name: Kanchan
Uppercase: KANCHAN
Lowercase: kanchan

Today Date: Wed Apr 03 2026 ...
Formatted Date: Wednesday, April 3, 2026

Salary: 95000
Currency: ₹95,000.00

Percentage: 0.85
Formatted Percentage: 85%

---

🔍 STEP-BY-STEP EXPLANATION

1. Pipe Operator

{{ value | pipeName }}

👉 The | symbol is used to apply a pipe.

---

2. Uppercase Pipe

{{ name | uppercase }}

👉 Converts text to uppercase.

---

3. Lowercase Pipe

{{ name | lowercase }}

👉 Converts text to lowercase.

---

4. Date Pipe

{{ today | date:'fullDate' }}

👉 Formats date in readable form.

---

5. Currency Pipe

{{ salary | currency:'INR' }}

👉 Displays value as currency (₹).

---

6. Percent Pipe

{{ percentage | percent }}

👉 Converts decimal into percentage.

---

🎯 COMMON ANGULAR PIPES

Pipe	Purpose
uppercase	Converts text to uppercase
lowercase	Converts text to lowercase
date	Formats date
currency	Formats currency
percent	Converts number to percentage
json	Displays object as JSON

---

⚡ ADVANCED: CUSTOM PIPE

You can also create your own pipe.

---

Step 1: Generate Pipe

ng g pipe reverse

---

Step 2: Update reverse.pipe.ts

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

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

---

Step 3: Use in HTML

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

---

OUTPUT

avatsirv ativak

---

🌟 WHY PIPES ARE IMPORTANT

Pipes help in:

• Formatting data easily
• Keeping templates clean
• Reducing logic in components
• Improving readability

---

📚 REAL-WORLD USE CASE

Angular pipes are used in:

• Formatting dates in dashboards
• Displaying currency in e-commerce
• Showing percentages in reports
• Transforming API data
• Formatting user names

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is a pipe in Angular?

👉 A pipe is used to transform data in templates.

---

Q2. What symbol is used for pipes?

👉 The | symbol.

---

Q3. What is the use of date pipe?

👉 To format date values.

---

Q4. What is currency pipe?

👉 It converts numbers into currency format.

---

Q5. What is a custom pipe?

👉 A user-defined pipe for custom data transformation.

---

Q6. How do you create a pipe?

👉 Using ng generate pipe pipeName.

---

Q7. What is pipe transform method?

👉 A method that transforms input data.

---

Q8. Can we chain pipes?

👉 Yes.

Example:

{{ name | uppercase | slice:0:5 }}

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 Angular Router App – Program 25
👉 Angular Components – Program 24

---

📌 CONCLUSION

Angular Pipes are a powerful feature used to transform and format data easily. They make templates clean and readable.

👉 Practice both built-in and custom pipes to strengthen your Angular skills.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites