20. Pipes and Custom Pipes

In Angular, pipes allow us to transform data before displaying it in the view. For example, converting a string to uppercase or formatting a date.

Example Built-in Pipes:

lowercase pipe: Converts a string to lowercase.
uppercase pipe: Converts a string to uppercase.
titlecase pipe: Capitalizes the first letter of each word.
slice pipe: Extracts a part of a string or an array.
json pipe: Converts an object to a JSON string.
date pipe: Formats a date.
currency pipe: Formats a number as currency.
percent pipe: Formats a number as a percentage.
decimal pipe: Formats a number with a specified number of decimal places.

1. Lowercase Pipe

Converts a string to lowercase.

{{ 'WELCOME TO ANGULAR' | lowercase }}
<!-- Output: 'welcome to angular' -->

2. Uppercase Pipe

Converts a string to uppercase.

{{ 'hello world' | uppercase }}
<!-- Output: 'HELLO WORLD' -->

3. Titlecase Pipe

Capitalizes the first letter of each word.

{{ 'hello world from angular' | titlecase }}
<!-- Output: 'Hello World From Angular' -->

4. Slice Pipe

Extracts a section of a string or an array.

{{ 'Angular Framework' | slice:0:7 }}
<!-- Output: 'Angular' -->

{{ [1, 2, 3, 4, 5] | slice:1:3 }}
<!-- Output: '[2, 3]' -->

5. JSON Pipe

Converts an object into a JSON string.

{{ { name: 'Shoyeb', age: 30 } | json }}
<!-- Output: '{"name":"Shoyeb","age":30}' -->

6. Date Pipe

Formats a date.

{{ currentDate | date:'fullDate' }}
<!-- Output: 'Friday, December 13, 2024' -->

You can specify different date formats:

{{ currentDate | date:'short' }}
<!-- Output: '12/13/2024, 1:00 PM' -->

7. Currency Pipe

Formats a number as a currency.

{{ 12345.678 | currency:'USD' }}
<!-- Output: '$12,345.68' -->

8. Percent Pipe

Formats a number as a percentage.

{{ 0.1234 | percent }}
<!-- Output: '12%' -->

9. Decimal Pipe

Formats a number with a specified number of decimal places.

{{ 12345.6789 | number:'1.2-3' }}
<!-- Output: '12,345.679' -->

{{ 12345.6789 | number:'3.1-3' }}
<!-- Output: '12,345.679' -->

10. Async Pipe

Subscribes to an Observable or Promise and returns the latest value.

<div *ngIf="data$ | async as data">
  {{ data.name }}
</div>

Example Usage of Multiple Pipes:

{{ 'hello world' | uppercase | slice:0:5 }}
<!-- Output: 'HELLO' -->

Creating a Custom Pipe

To create a custom pipe in Angular, follow these steps:

Generate a custom pipe using Angular CLI:
```
ng generate pipe pipes/customPipe
```
Check if the pipe is auto-registered in app.module.ts. If not, manually add it under declarations.

Example of a Custom Pipe

Create the custom pipe class:

customPipe.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'customPipe'  // Name to be used in templates
})
export class CustomPipe implements PipeTransform {
 
  transform(value: string): string {
    if (!value) return value;  // Check if value is empty or null
    return value.toUpperCase();  // Convert the value to uppercase
  }
}

Use the custom pipe in the template:

app.component.html:

<h1>{{ 'hello world' | customPipe }}</h1>  <!-- Converts text to uppercase using custom pipe -->

Register the custom pipe in app.module.ts:

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CustomPipe } from './pipes/customPipe.pipe';  // Import custom pipe
 
@NgModule({
  declarations: [
    AppComponent,
    CustomPipe  // Declare the custom pipe in the module
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example of Custom Pipe with Parameters

You can also pass parameters to the custom pipe to modify the transformation logic.

Modify the custom pipe to accept arguments: