Angular Pipes MVC core ASP.NET Core
▌Introduction
In this tutorial,
we will learn how to create custom pipe.
▋Related articles
▌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 for 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.
▋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.
▋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.
▌Github
▌Reference
沒有留言:
張貼留言