PipeTransform

From Get docs
< @angular/coreAngular/docs/11/api/core/pipetransform


PipeTransform

interface

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
}

Class implementations

  • AsyncPipe
  • DatePipe
  • I18nPluralPipe
  • I18nSelectPipe
  • JsonPipe
  • LowerCasePipe
  • CurrencyPipe
  • DecimalPipe
  • PercentPipe
  • SlicePipe
  • UpperCasePipe
  • TitleCasePipe
  • KeyValuePipe


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.

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

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

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

Invoking Template:'It was the best of times' 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.

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

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

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

Invoking Template:'It was the best of times' in a template will produce It was the best.....


© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/core/PipeTransform