O'Reilly logo

Developing an Angular 2 Edge by Ran Wahle, Mary Gualtieri, Wojciech Kwiatek, Suguru Inatomi, Filip Lauc, Troy Mott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 7. Pipes

Pipe is a transformer to display data. You can use pipes for string formatting, data converting or other things. Pipes let you separate view-specific logic from components or services.

In Angular 2, you can use pipes with pipe operator (|) in the component template. Let’s look at the following simple example:

@Component({
  selector: 'my-cmp',
  template: `<h1>{{ title | uppercase }}</h1>`,
})
export class MyComponent {
  title = 'Pipes';
}

The component will be rendered as <h1>PIPES</h1>. In this case, title property is transformed by the uppercase pipe. All pipes take an input value from the left-side of the operator (|), and some pipes take additional parameters from the right-side of the pipe’s name as pipe:param1:param2 like ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required