a pipe in Angular is used to transform data in the component template

it's used like that {{creationDate | date}} here we are using the DatePipe, you can pass additional parameters using a colon :, e.g. {{ creationDate | date : 'shortTime' }} the first parameter is creationDate the second parameter is 'shortTime'

you can create a custom pipe using ng generate pipe power or a shorthand version ng g p power it generates a file like that

@Pipe({
  name: 'power',
  standalone: true,
})
export class PowerPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

the name in the decorator is the selector that you need to use in the component template so in this example it will be used like that {{value | power}}

we can modify the transform method to do its job like that

  transform(value: number, toPower = 2): unknown {
    return value ** toPower;
  }

this value will be passed for the first argument e.g. if we passed {{2 | power}} it will 4, if {{5 | power}} it will be 25 because our second parameter default to 2, but if we used {{2 | power : 3}} it will be 8 or {{5 | power : 3}} it will be 125

Pipe types

there are two types of pipes pure pipe - like the one we just created - and impure pipes

1. pure pipe like the one we just created, built-in examples are the DatePipe, UpperCasePipe, CurrencyPipe
2. impure pipe built-in examples are JsonPipe and AsyncPipe

impure pipe will look like that

@Pipe({
  name: 'power',
  standalone: true,
  pure: false,
})
export class PowerPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

you will see that the only difference is the pure: false and for this example it behave the same way, but the difference is how many times the transform method is being called

with pure pipe it's called only when one of the parameters change

with impure pipe it's called with every change detection regardless if its parameters changed or not

you may wonder, why would I want the pipe to run if its parameters aren't changed, well it's a bit more complicated than this

imagine this pipe example that just return the length of an array

@Pipe({
  name: 'length',
  standalone: true,
})
export class LengthPipe implements PipeTransform {
  transform(array: unknown[]): number {
    return array.length;
  }
}

being used like that

@Component({
  standalone: true,
  imports: [LengthPipe],
  selector: 'app-example',
  template: `
      {{array | length}}
      <button (click)="addItem()">add item</button>`,
})
export class ExampleComponent {
  array: number[] = [];

  addItem() {
    this.array.push(1);
  }
}

you must think that it will work, but actually it won't if you didn't make it impure by adding pure: false

that's because the array didn't change, it has been mutated, meaning the reference to the array didn't change, you can read more about it in mozilla documentation