Angular Pipes

What are pipes in Angular?

Pipes in Angular are a way to transform data in templates. They are used to format, transform, or manipulate data before displaying it in the view. Pipes take the data as input and return a transformed output. Angular provides several built-in pipes, such as date, uppercase, lowercase, and currency.

How do you use built-in pipes in Angular?

To use built-in pipes in Angular, you apply them in the template using the pipe (|) character. Angular pipes can take arguments, which are passed after the pipe character.

Example of using the uppercase and date pipes:

<p>{{ 'hello world' | uppercase }}</p>
<p>{{ currentDate | date:'fullDate' }}</p>

In this example, the string 'hello world' is converted to uppercase, and currentDate is formatted using the date pipe.

What are some common built-in pipes in Angular?

Some common built-in pipes in Angular include:

• Date Pipe: Formats a date value according to a specified format. ({{ dateValue | date:'short' }})
• Uppercase Pipe: Transforms text to uppercase. ({{ 'text' | uppercase }})
• Lowercase Pipe: Transforms text to lowercase. ({{ 'TEXT' | lowercase }})
• Currency Pipe: Formats a number as currency. ({{ 2500 | currency:'USD' }})
• Percent Pipe: Formats a number as a percentage. ({{ 0.25 | percent }})
• Decimal Pipe: Formats a number according to a specified decimal pattern. ({{ 1234.567 | number:'1.2-2' }})

How do you create a custom pipe in Angular?

To create a custom pipe in Angular, you define a class with the @Pipe decorator and implement the PipeTransform interface. The class must implement a transform() method that performs the data transformation.

Example of creating a custom pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

In this example, the custom pipe ReversePipe reverses a string.

To use the custom pipe in the template:

<p>{{ 'hello' | reverse }}</p>

This will output olleh.

What is the pure property in a custom pipe, and how does it affect performance?

The pure property in a custom pipe determines whether the pipe is pure or impure. A pure pipe is only called when Angular detects a change in the input value, which improves performance. An impure pipe is called on every change detection cycle, which can lead to performance issues if used incorrectly.

By default, pipes are pure. You can mark a pipe as impure by setting pure: false in the @Pipe decorator.

Example:

@Pipe({
  name: 'impurePipe',
  pure: false
})
export class ImpurePipe implements PipeTransform {
  transform(value: any): any {
    // Transformation logic here
    return value;
  }
}

Impure pipes are recalculated every time the change detection cycle runs, regardless of whether the input value has changed.

What is the transform() method in a pipe, and how does it work?

The transform() method is the core of any custom pipe in Angular. It takes the input value and applies the transformation logic to return the output. The method can also accept optional parameters to customize the transformation.

Example of the transform() method:

transform(value: string, separator: string): string {
  return value.split('').join(separator);
}

In this example, the transform() method splits the string and joins it with a custom separator passed as an argument.

Usage in the template:

<p>{{ 'Angular' | customPipe:'-' }}</p>

This will output A-n-g-u-l-a-r.

How do you pass parameters to a pipe in Angular?

You can pass parameters to a pipe in Angular by adding them after the pipe, separated by colons. The parameters are then passed as additional arguments to the transform() method of the pipe.

Example:

<p>{{ 1234.5678 | number:'1.1-2' }}</p>

In this example, the number pipe is passed a formatting string '1.1-2', which formats the number to have at least one digit before the decimal point and between one and two digits after the decimal point.

What is the difference between pure and impure pipes in Angular?

The key difference between pure and impure pipes in Angular is when they are executed:

• Pure pipes: These pipes are called only when the input reference changes. They are more efficient and are the default type of pipe in Angular.
• Impure pipes: These pipes are called during every change detection cycle, even if the input has not changed. They are used for cases where the pipe needs to handle data that is dynamically changing, like arrays or objects.

Impure pipes can negatively impact performance and should be used with caution.

How do you handle complex data transformations using pipes?

For complex data transformations, you can create custom pipes that apply multiple levels of transformation logic. You can also pass multiple arguments to the transform() method to handle more dynamic transformations.

Example of handling complex data transformation:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'formatName'
})
export class FormatNamePipe implements PipeTransform {
  transform(value: string, lastNameFirst: boolean = false): string {
    const [firstName, lastName] = value.split(' ');
    return lastNameFirst ? `${lastName}, ${firstName}` : `${firstName} ${lastName}`;
  }
}

This pipe formats a full name either in "First Last" format or "Last, First" format based on the argument lastNameFirst.

Usage:

<p>{{ 'John Doe' | formatName:true }}</p>

This will output Doe, John.

How do you chain multiple pipes in Angular?

You can chain multiple pipes in Angular by applying one pipe after another in the template, separating them with the pipe (|) character. The output of one pipe becomes the input for the next pipe.

Example of chaining pipes:

<p>{{ 'Angular Pipes' | uppercase | slice:0:7 }}</p>

In this example, the string is first transformed to uppercase using the uppercase pipe, and then the slice pipe extracts the first seven characters from the resulting string. The output will be ANGULAR.

What is the async pipe in Angular?

The async pipe in Angular is used to automatically subscribe to Observables or Promises in templates and bind the emitted values. It eliminates the need for manual subscription and unsubscription when dealing with asynchronous data streams.

Example of using the async pipe:

<p>{{ observableData$ | async }}</p>

In this example, the async pipe subscribes to the observableData$ and automatically updates the template when new values are emitted.

What are some use cases for custom pipes in Angular?

Custom pipes in Angular are useful when you need to apply custom data transformations that are not covered by built-in pipes. Some use cases include:

• Formatting specific data like names, phone numbers, or addresses.
• Custom string manipulations (e.g., reversing strings, formatting case).
• Filtering or sorting arrays based on custom logic.
• Handling data transformations that are specific to your application's business logic.

Can pipes be used with reactive forms in Angular?

Pipes are primarily used in templates for display purposes and are not directly applied to reactive forms. However, you can use pipes to format the data in the view while leaving the form's internal data unchanged. For data transformations in forms, you would typically use form validators or model-based transformations in the component class.