sample blog tutorial json
0 likes

Sample Title for a Blog Post

Angular Pipes

In Angular, pipes are a simple way to transform data. They can be used to format strings, currency amounts, dates, and other data types, and they can be used in both the template HTML and component TS files. Angular provides several built-in pipes, and developers can also create custom pipes.

Basic Syntax

Angular pipe's syntax is pretty straightforward. You simply use the pipe character (|) followed by the name of the pipe, like so:

Copy Code 
{{ expression | pipeName }}

Built-in Pipes

Below are five examples of different Angular pipes.

1. DatePipe

This pipe formats a date value according to locale rules.

Usage in HTML Template:

Copy Code 
<p>{{ today | date:'fullDate' }}</p>

In the component TS file:

Copy Code 
today: number = Date.now();

2. CurrencyPipe

The CurrencyPipe is used for transforming numbers to currency strings.

Usage in HTML Template:

Copy Code 
<p>{{ amount | currency:'USD':true }}</p>

In the component TS file:

Copy Code 
amount: number = 100;

3. DecimalPipe

The DecimalPipe is used to transform a number into a string with a decimal point, where you can set the amount of trailing decimals.

Usage in HTML Template:

Copy Code 
<p>{{ pi | number:'1.2-2' }}</p>

In the component TS file:

Copy Code 
pi: number = 3.14159;

4. LowerCasePipe & UpperCasePipe

These pipes are used to transform text to lower and upper case respectively.

Usage in HTML Template:

Copy Code 
<p>{{ text | lowercase }}</p>
<p>{{ text | uppercase }}</p>

In the component TS file:

Copy Code 
text: string = 'Angular Pipes';

5. PercentPipe

This pipe is used to transform a number to a percentage string.

Usage in HTML Template:

Copy Code 
<p>{{ fraction | percent }}</p>

In the component TS file:

Copy Code 
fraction: number = 0.45;

Creating Custom Pipes

Besides the built-in pipes, developers can also create custom pipes to handle specific data transformations. Here is a simplified example of creating a custom pipe that reverses a string.

Copy Code 
// 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('');
  }
}

Usage in HTML Template:

Copy Code 
<p>{{ text | reverse }}</p>

Conclusion

Angular pipes are powerful and versatile tools that can help with various transformations and formatting needs within Angular applications. By understanding and utilizing both built-in and custom pipes, developers can efficiently manage and display data in their projects.

0 comments