Pipe character angular 2

A pipe takes in data as input and transforms it to a desired output.

Pipe character "|" helps to display the content

Examples of pipe

import { Component } from 'angular2/core';

@Component({
  selector: 'my-story',
  template: `
    <h3>{{story.name}}</h3>
    <h3 [innerText]="story.name"></h3>
    <div [style.color]="color">{{story.name}}</div>
    {{story| json}}
  `
})
export class StoryComponent {
  story = { id: 100, name: 'The Force Awakens' };
  color = 'blue';
}

Custom pipes

This custom pipe is used to perform sorting

Note:For the PipeTransform there is only one interface

Using the custom pipe in a template