GeezerVison

    
      interface PipeTransform {}
    
    

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

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.

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.....