In Angular, pipes are a powerful way to transform data in your templates. Built-in pipes provide a variety of common data transformations, such as formatting dates, numbers, and strings. This section will cover the most commonly used built-in pipes and how to use them effectively in your Angular applications.

1. What are Pipes?

   • Pipes are simple functions that accept an input value, process it, and return a transformed value.
   • They are used in Angular templates to format data before displaying it to the user.

2. Syntax

   • Pipes are used in templates with the pipe (|) character.
   • Example: {{ value | pipeName }}

3. Common Built-in Pipes

   • DatePipe
   • UpperCasePipe
   • LowerCasePipe
   • CurrencyPipe
   • DecimalPipe
   • PercentPipe
   • JsonPipe
   • SlicePipe

The DatePipe is used to format date values according to locale rules.

Syntax:

Example:

Explanation:

• today is a date object.
• 'fullDate' is a predefined format option.

These pipes are used to transform text to uppercase or lowercase.

Syntax:

Example:

The CurrencyPipe formats a number as currency.

Syntax:

Example:

Explanation:

• 1234.56 is the number to be formatted.
• 'USD' specifies the currency code.
• 'symbol' specifies that the currency symbol should be displayed.
• '1.2-2' specifies the number of integer and fraction digits.

The DecimalPipe formats a number as a decimal.

Syntax:

Example:

Explanation:

• 1234.5678 is the number to be formatted.
• '1.2-2' specifies the number of integer and fraction digits.

The PercentPipe formats a number as a percentage.

Syntax:

Example:

Explanation:

• 0.1234 is the number to be formatted.
• '1.2-2' specifies the number of integer and fraction digits.

The JsonPipe converts a value into a JSON string.

Syntax:

Example:

The SlicePipe creates a new array or string containing a subset (slice) of the elements.

Syntax:

Example:

Task: Create an Angular component that displays the current date in different formats using the DatePipe.

Solution:

1. Create a new component:

   ng generate component date-format
   

2. Update the component template (date-format.component.html):

   <p>Full Date: {{ today | date:'fullDate' }}</p>
   <p>Short Date: {{ today | date:'shortDate' }}</p>
   <p>Medium Time: {{ today | date:'mediumTime' }}</p>
   

3. Update the component class (date-format.component.ts):

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-date-format',
     templateUrl: './date-format.component.html',
     styleUrls: ['./date-format.component.css']
   })
   export class DateFormatComponent {
     today: Date = new Date();
   }
   

Task: Create an Angular component that displays a product price in different currencies using the CurrencyPipe.

Solution:

1. Create a new component:

   ng generate component product-price
   

2. Update the component template (product-price.component.html):

   <p>Price in USD: {{ price | currency:'USD':'symbol' }}</p>
   <p>Price in EUR: {{ price | currency:'EUR':'symbol' }}</p>
   <p>Price in GBP: {{ price | currency:'GBP':'symbol' }}</p>
   

3. Update the component class (product-price.component.ts):

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-product-price',
     templateUrl: './product-price.component.html',
     styleUrls: ['./product-price.component.css']
   })
   export class ProductPriceComponent {
     price: number = 1234.56;
   }
   

In this section, we explored the built-in pipes provided by Angular, including DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, and SlicePipe. We learned how to use these pipes to transform data in our templates and practiced with practical exercises to reinforce the concepts. Understanding and utilizing these built-in pipes will help you format and display data effectively in your Angular applications.