Activity 13 Research Angular Pipes

Definition of Angular Pipes

Angular Pipes are a feature designed to transform data within templates before rendering them in the view. Pipes are useful for formatting, transforming, or manipulating data in a way that enhances its presentation to the user. Instead of modifying the data at the source (in the component), pipes provide a clean and reusable way to handle data transformation directly in templates.

Purpose:

• Angular pipes are designed to transform output data for display. For example, you can format dates, numbers, strings, or even filter lists based on custom criteria.

---

Types of Angular Pipes

1. Built-in Pipes

Angular provides a variety of built-in pipes that are ready for use out of the box. Here are some of the commonly used pipes:

• DatePipe: Formats a date value according to locale rules.

• CurrencyPipe: Formats a number as a currency value.

• DecimalPipe: Formats a number as a decimal.

• UpperCasePipe: Transforms text to uppercase.

• LowerCasePipe: Transforms text to lowercase.

• PercentPipe: Formats a number as a percentage.

• SlicePipe: Returns a subset (slice) of an array or string.

Built-in Pipe Use Cases & Examples

1. DatePipe
   Use Case: Formatting dates in a readable format.

    htmlCopy code<!-- app.component.html -->
    <p>Today is: {{ today | date:'longDate' }}</p>
   

   Explanation: The DatePipe formats the today variable to a long date format.

2. CurrencyPipe
   Use Case: Displaying formatted currency.

    htmlCopy code<p>Price: {{ product.price | currency:'USD':'symbol':'1.2-2' }}</p>
   

   Explanation: The CurrencyPipe formats the price as a currency in USD with a symbol and two decimal places.

3. UpperCasePipe & LowerCasePipe
   Use Case: Converting text to uppercase or lowercase for consistency.

    htmlCopy code<p>{{ name | uppercase }}</p>
    <p>{{ email | lowercase }}</p>
   

   Explanation: The text will be converted to all uppercase or lowercase letters as specified.

4. SlicePipe
   Use Case: Displaying a subset of an array or string.

    htmlCopy code<p>First 3 items: {{ items | slice:0:3 }}</p>
   

   Explanation: The SlicePipe returns the first three items from the items array.

---

2. Creating Custom Pipes

When Angular's built-in pipes don’t meet specific requirements, you can create custom pipes. A custom pipe is a class that implements the PipeTransform interface and defines a transform method that handles the data transformation.

Steps to Create a Custom Pipe

1. Generate a pipe using the Angular CLI:

    perlCopy codeng generate pipe customPipe
   

2. Implement the custom logic in the transform method.

Example: Custom Pipe for Filtering

Use Case: Filtering a list of items based on a search query.

typescriptCopy code// search-filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items || !searchText) {
      return items;
    }
    return items.filter(item => item.name.toLowerCase().includes(searchText.toLowerCase()));
  }
}

Explanation: The custom SearchFilterPipe takes an array of items and a search string, then filters the array to return only those items that contain the search string.

Usage in Template:

htmlCopy code<ul>
  <li *ngFor="let item of items | searchFilter:searchText">{{ item.name }}</li>
</ul>

---

Use Cases of Angular Pipes

1. Displaying Formatted Dates and Numbers:

   • You might need to show a date in a human-readable format or represent a currency value properly. Angular pipes such as DatePipe and CurrencyPipe can handle this elegantly.

Example:

    htmlCopy code<p>Transaction Date: {{ transactionDate | date:'short' }}</p>
    <p>Total Amount: {{ totalAmount | currency:'USD' }}</p>

2. Uppercase and Lowercase Transformations:

   • In user interfaces, consistent capitalization or lowercase formatting may be required. UpperCasePipe and LowerCasePipe are used for this purpose.

Example:

    htmlCopy code<p>{{ userName | uppercase }}</p>

3. Filtering and Searching Data:

   • Custom pipes are helpful when you need to filter or search data dynamically in your template without using complex logic in the component.

Example:

    htmlCopy code<input [(ngModel)]="searchText" placeholder="Search items" />
    <ul>
      <li *ngFor="let item of items | searchFilter:searchText">{{ item }}</li>
    </ul>

---

Code Snippets for Built-in Pipes

DecimalPipe Example:

Use Case: Formatting numbers to display with a certain number of decimals.

htmlCopy code<p>{{ 3.14159 | number:'1.2-2' }}</p>
<!-- Output: 3.14 -->

Explanation: This will format the number to have at least 1 digit before the decimal and 2 decimal places.

---

Conclusion and Blog Post Outline for Hashnode

1. Introduction

   • Overview of Angular pipes and why they are useful.

2. Types of Angular Pipes

   • Explanation of built-in pipes like DatePipe, CurrencyPipe, UpperCasePipe, and more.

   • Practical use cases of each pipe.

3. Creating Custom Pipes

   • Explanation of when and how to create custom pipes.

   • Example of a custom filter pipe for searching.

4. Use Cases

   • Real-world scenarios where pipes simplify data formatting and transformation.

5. Code Snippets

   • Include examples demonstrating the use of both built-in and custom pipes.

6. Further Reading

   • Provide links to Angular’s official documentation for pipes and additional resources for deeper learning.

---

References:

• https://v17.angular.io/guide/pipes-overview