Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

PipeTransform

An interface that is implemented by pipes in order to perform a transformation. Angular invokes the transform method with the value of a binding as the first argument, and any parameters as the second argument in list form.

      
      interface PipeTransform {
transform(value: any, ...args: any[]): any }

Methods

      
      transform(value: any, ...args: any[]): any
    
Parameters
value any
args any[]
Returns

any

Usage notes

In the following example, TruncatePipe returns the shortened value with an added ellipses.

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

@Pipe({name: 'truncate'})
export class TruncatePipe implements PipeTransform {
  transform(value: string) {
    return value.split(' ').slice(0, 2).join(' ') + '...';
  }
}
    

Invoking {{ 'It was the best of times' | truncate }} in a template will produce It was....

In the following example, TruncatePipe takes parameters that sets the truncated length and the string to append with.

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

@Pipe({name: 'truncate'})
export class TruncatePipe implements PipeTransform {
  transform(value: string, length: number, symbol: string) {
    return value.split(' ').slice(0, length).join(' ') + symbol;
  }
}
    

Invoking {{ 'It was the best of times' | truncate:4:'....' }} in a template will produce It was the best.....