Pipes

Given the data

let myDate = "2017-01-01T23:30:20Z";

And the template

<div>
    <label>Display Date</label>
    <span>{{ myDate|displayDateTime|addGMT }}</span>
</div>

The output would be

<div>
    <label>Display Date</label>
    <span>01/01/2017 23:30:20 (GMT)</span>
</div>

Each pipe takes a string input, minipulates it in some way and returns a string output

Chaining

As in the example pipes can be chained, subsequent pipes will take the input of the preceeding pipe as their source string

Declaring

Pipes are decalred in the Services.pipes.ts file.

class Pipes {
    public displayDateTime(utc: string): string {
        let output = utc;
        // modify the value
        return output;
    }

    public addGMT(date: string): string {
        if (date.length > 0)
            return date + " (GMT)";
        else
            return date;
    }

    // add any others
}