How to chain pipes to format and truncate strings in Angular templates

Question

Can you tell me How to chain pipes to format and truncate strings in Angular templates?

Answer 1

In Angular templates, you can chain pipes to format and truncate strings using the | operator. For example, to format a string and truncate it, combine the built-in slice pipe with other pipes like uppercase or date:

{{ text | uppercase | slice:0:10 }}

For custom truncation, create a custom pipe:

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

@Pipe({ name: 'truncate' })

export class TruncatePipe implements PipeTransform {

  transform(value: string, limit: number = 10, trail: string = '...'): string {

    return value.length > limit ? value.substring(0, limit) + trail : value;

  }

}