Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:2Length:9 minutes

1.2 How to Use Angular 2 Pipes

Pipes are very useful for transforming data in Angular 2. In this lesson, I’ll show you some of the most common built-in pipes for formatting data such as currency or dates. Then, I’ll show you how to code your own pipe to truncate string data, complete with a parameter to control the output string length.

Code Snippet:

The following snippet defines a custom pipe to truncate a string.

@Pipe({name: 'truncate'})
export class TruncatePipe implements PipeTransform {
    transform(value: string, chars: number): string {
      let text = `${value.substring(0, chars)}  ...`;
      return text;

Then you can use the pipe in a template with {{someString | truncate:50}}.

1.How to Use Angular 2 Pipes
2 lessons, 09:02

Free Lesson

How to Use Angular 2 Pipes