Angular2 - Pipes

What are pipes? A pipeline is a sequence of processes chained together by their standard streams, so that the output of each process (stdout) feeds directly as input (stdin) to the next one. Straight from Wikipedia, yeahhhh.

Pipes in Angular are no different. There are a lot of things we can achive with it, but I'd advice you from going overboard. Always check to see if there is a better place/way to do this. If the transformation is one-time and is not complicated, fair enough, do it on the client side. The moment you see the same transformation done more than once, think about a custom pipe. Even with custom pipe you'd want to make sure it is simple. If it gets complicated, try to handle it on server side (in service). Keep client light & clean, make your code less buggy and light.

Angular2 allows for different types of pipes - Literal, Number, Currency, Date, Object and so much more. If the templated pipes are not enough, you can customize and create a pipe of your own. We will not delve into custom pipes in this BLOG. Let's save that for later

First, let's do a currency pipe
Add a new component - currency.component.ts & Pipes.service.ts

pipes.service.ts

import {Injectable} from "angular2/core";

@Injectable()
export class PipesService {
    getToDaysDate():Date {
        return new Date();
    }

    getApplicationVersion(): number {
        return 1.0;
    }

    getApplicationBuild(): number {
        return 12321;
    }

    getDollarValue(): number {
        return 15.41;
    }

    getEuroValue(): number {
        return 40.003;
    }

    getRandomData() {
        //TODO: Make this an array and return something randomly
        return "Some data";
    }
}

That's the service we will use for all components we will create from now on.

currency.component.ts

import {Component, OnInit} from 'angular2/core';
import {PipesService} from "./pipes.service";

@Component({
    selector: 'currency-comp',
    template: `
        <h5>Today's currency values</h5>
        <div class=".pipes">
            <ol>
                <li>{{dollarValue | currency:'USD':true}}</li>
                <li>{{euroValue | currency:'EUR':false:'1.4-4'}} </li>
            </ol>
        </div>
    `,
    providers:[PipesService],
})
export class CurrencyComponent implements OnInit {

    dollarValue: number;
    euroValue: number;
    
    constructor(private _pipesService: PipesService) {}

    ngOnInit():any {
        this.dollarValue = this._pipesService.getDollarValue();
        this.euroValue = this._pipesService.getEuroValue();
    }
}

As you see, cdollarValue is a number variable, we use currency pipeline to convert it to a currency field. Take a look at https://angular.io/docs/js/latest/api/common/CurrencyPipe-class.html to know more on parameters and other choices

Add a new component

date.component.ts

import {Component, OnInit} from 'angular2/core';
import {PipesService} from "./pipes.service";
import {MyVersionComponent} from "./version.component";

@Component({
    selector: 'myDate-comp',
    template: `
        <div class="pipes">
            <table width="100%">
                <tr>
                    <td><h2>{{today | date:'short'}}</h2></td>
                    <td align="right"><myVersion-comp align="right"></myVersion-comp></td>
                </tr>
            </table>
        </div>
    `,
    directives: [MyVersionComponent],
    providers: [PipesService],
})
export class MyDateComponent implements OnInit {
    constructor(private _pipesService:PipesService) {
    }

    today:Date = null;

    ngOnInit():any {
        this.today = this._pipesService.getToDaysDate();
    }

}

Here, we do something like what we did in currency component. Now you see the familiar pattern of how pipes work. To know more check https://angular.io/docs/js/latest/api/common/DatePipe-class.html

Most of the other pipes work very much the same way, except for one  AsyncPipe. It's different from other

randomAsync.component.ts

import {Component, OnInit} from 'angular2/core';

@Component({
    selector: 'async-comp',
    template: `
        <h5>Async - Random</h5>
        <div class=".pipes">
            {{randomData | async}}
        </div>
    `,
})
export class RandomAsyncComponent {

    randomData: string = new Promise((resolve, reject) => {
        setTimeout(() => resolve('Random Data!'), 2000);
    });
}

To understand AsyncPipe better, knock of " | async" out of code, see the behavior and put it back. You'll notice that this pipe will be one of the most used pipes of all of them.

Finally, if you are wondering, how I have my app component, here's how I have aggreagated the rest of them

app.component.ts

import {Component} from 'angular2/core';
import {MyDateComponent} from './date.component'
import {CurrencyComponent} from "./currency.component";
import {RandomAsyncComponent} from "./randomAsync.component";

@Component({
    selector: 'my-app',
    template: `
       <h1>Angular 2 - Sample Pipes</h1>
        <p>Welcome to the world of Angular2 Pipes</p>
        <myDate-comp></myDate-comp>
        <currency-comp></currency-comp>
        <async-comp></async-comp>   
    `,
    directives: [MyDateComponent, CurrencyComponent, RandomAsyncComponent],
})
export class AppComponent {

}

app.scss

body {
  padding: 32px;
  margin: 32px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
}

.pipes {
  margin: 32px 0;
  padding: 16px;
  background-color: #eee;
  border: 1px solid #ccc;
}