Pipes In Angular

In Angular, a pipe is a feature that allows you to transform data in your templates. Pipes are used to format, filter, and manipulate data displayed in the view

1. Built-in Pipes

Angular provides several built-in pipes for common transformations:

DatePipe: Formats dates.
UpperCasePipe: Converts text to uppercase.
LowerCasePipe: Converts text to lowercase.
CurrencyPipe: Formats a number as currency.
DecimalPipe: Formats a number as a decimal.
PercentPipe: Formats a number as a percentage.
JsonPipe: Converts a value into a JSON string.
SlicePipe: Creates a new array or string containing a subset of the elements.
AsyncPipe: Handles asynchronous data streams (e.g., Promises and Observables).

**To use a pipe in a template, you use the pipe symbol (|):

<p>{{ today | date }}</p>

Example:

*Chaining Pipes:

You can chain multiple pipes together in Angular by applying them one after the other in the template

Example:

<p>{{ 'hello world' | uppercase | slice:0:5 }}</p>

*Create the custom pipe:

In na.pipe.ts

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

@Pipe({
     name: 'na',
     standalone: true
})
export class NaPipe implements PipeTransform {
     transform(value: unknown, …args: unknown[]): unknown {
          If(value !== null && value !== undefined && value !== '') {
               return value;
          } else {
               return 'NA';
          }
     }
}

In html