# 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.
    
    ```plaintext
    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.
    
    ```plaintext
    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.
    
    ```plaintext
    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.
    
    ```plaintext
    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:
    
    ```plaintext
    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.

```plaintext
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**:

```plaintext
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:
    
    ```plaintext
    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:
    
    ```plaintext
    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:
    
    ```plaintext
    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.

```plaintext
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](https://v17.angular.io/guide/pipes-overview)