Introduction

In this article, we will learn how to create custom pipe.

Environment

• Visual Studio 2015 Update 3
• NPM: 3.10.3
• Microsoft.AspNetCore.Mvc 1.0.0
• angular 2: 2.1.0

Implement

Remember that we showed message when viewing the customer’s details by sending an object: SysEvent with EventEmitter.
Here we want to show more SysEvent's properties like this:

2016/10/25 19:33 [Info] You are looking at HACHI’s information!

Since we already have all the properties we need in class: SysEvent, we just need
to write a custom pipe for showing the formatted message.

Let’s start creating a custom pipe in customer.pipe.ts.

Create Custom Pipe

• /app/Basic/Customer/customer.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
import {Customer} from '../../class/Customer';
import {SysEvent} from '../../class/SysEvent';


@Pipe({
    name: 'wrapEvent'
})

export class WrapEventPipe implements PipeTransform {

    constructor() {}
    transform(content: SysEvent) {
        //Remove html tags
        let msg = content.Msg;
        var rex = /(<([^>]+)>)/ig;
        msg = msg.replace(rex, "");

        //Convert date to string
        var datePipe = new DatePipe("en-US");
        let createOn = datePipe.transform(content.CreateOn, 'yyyy/MM/dd HH:mm');

        let title = content.Title;
        let createBy = content.CreateBy;

        return createOn.concat(' [', title, '] ', msg);
    }
}

In the above codes, we create a pipe class which implements interface: PipeTransform.
Also we use DatePipe to format the date object.

Import and declare our pipe

• /app/Basic/Customer/customer.app.module.ts

//Skip...
import {WrapEventPipe} from './customer.pipe';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        CustomerRoutes
    ],
    declarations: [CustomerAppComponent, CustomerIndexComponent, CustomerCreateComponent, CustomerEditComponent, CustomerDetailComponent, WrapEventPipe],
    bootstrap: [CustomerAppComponent]
})
export class CustomerAppModule { }

Using Custom Pipe

• /app/Basic/Customer/customer-index.component.html

<div *ngIf="events">
    <div class="list-group" *ngFor="let evn of events; let sn=index">
        <a href="#" class="disabled list-group-item">{{evn | wrapEvent}}</a>
    </div>
</div>

Result

Refactoring: inject LOCAL_ID

We assigned the localization in the constructor of DatePipe.

var datePipe = new DatePipe("en-US");

We will refactor this and inject the localization setting from customer.app.module.

Import LOCAL_ID

• /app/Basic/Customer/customer.app.module.ts

//Skip...
import { NgModule, LOCALE_ID }  from '@angular/core';
import { WrapEventPipe } from './customer.pipe';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        CustomerRoutes
    ],
    declarations: [CustomerAppComponent, CustomerIndexComponent, CustomerCreateComponent, CustomerEditComponent, CustomerDetailComponent, WrapEventPipe],
    providers: [
        //replace "en-US" with your locale
        { provide: LOCALE_ID, useValue: "en-US" },
    ],
    bootstrap: [CustomerAppComponent]
})
export class CustomerAppModule { }

Inject LOCAL_ID

• /app/Basic/Customer/customer.pipe.ts

Update our WrapEventPipe in order to inject LOCAL_ID.

import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
//Skip ...

@Pipe({
    name: 'wrapEvent'
})
export class WrapEventPipe implements PipeTransform {

    constructor( @Inject(LOCALE_ID) private _locale: string) {
    }

    transform(content: SysEvent) {
        //...
       
        //Convert date to string
        //var datePipe = new DatePipe("en-US");
        var datePipe = new DatePipe(this._locale); //Use the injected LOCAL_ID
       
        //...
    }
}

Result

The result is the same as the previous result. (Of course!)

What’s next?

Before we start the next angular 2 tutorial, a good logging framework is a must!
We will create the logger for both frontend and backend.

Reference

1. Angular 2 document
2. How to set locale in DatePipe in Angular2?