How
to create a custom Pipes?
How
to create a globally available custom “Pipe”?
The “@Pipe” decorator allows us to define the
pipe name that is globally available for use in any template in the across
application.
Steps
for Creating a Custom Pipe:-
1.
Create a typescript class.
2.
Decorate the class using @Pipe.
3.
Implement PipeTransform interface.
4.
Override transform() method.
5.
Configure the class in application
module with @NgModule.
6.
Ready to use our custom pipe anywhere
in application.
In
the below example,
I am using the custom pipe in the user temple to
display our custom “Ids” values at the place of Id.
Table
of Component
1.
user.component.ts
2.
user.service.ts
3.
custom.barcode.pipe.ts
4.
app.module.ts
5.
user.component.html
user.component.ts
:-
import { Component, Injectable} from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, Http } from '@angular/http';
import { UserService } from '../shared/service/user.service';
import { BarCodePipe } from '../shared/pipe/custom.barcode.pipe';
@Component({
selector: 'user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent {
//USERS
DECLARATIONS.
users = [];
//FETCHING JSON
DATA FROM REST APIS
userRestApiUrl: string = 'https://api.github.com/users/hadley/orgs';
//HOME
COMPONENT CONSTRUCTOR
constructor(private
userService: UserService) { }
//GET USERS
SERVICE ON PAGE LOAD.
ngOnInit() {
this.userService.getUsers(this.userRestApiUrl).subscribe(data => this.users = data);
}
}
//END
BEGIN - USERCOMPONENT
user.service.ts
:-
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
//BEGIN-REGION
- USERSERVICE
@Injectable()
export class UserService {
constructor(private _http:
Http) {
}
getUsers(apiUrl) {
return this._http.get(apiUrl).map((data:
Response) => data.json());
}
}
//END BEGIN – USERSERVICE
custom.barcode.pipe.ts
:-
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'barcode',
pure: false
})
export class BarCodePipe implements PipeTransform {
transform(value: string, args: any[]): string {
if (!value) {
return '';
}
return "....-" + (value.length > 2 ? (value.length - 2) : '')
}
}
app.module.ts
:-
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './components/app/app.component';
import { UserComponent } from './components/user/user.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { MenuComponent } from './components/menu/menu.component';
import { LoginComponent } from './components/login/login.component';
import { RegistrationComponent } from './components/registration/registration.component';
import { UserService } from './components/shared/service/user.service';
import { BarCodePipe } from './components/shared/pipe/custom.barcode.pipe';
import { MyPipePipe } from './components/shared/pipe/test.pipes';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
UserComponent,
HeaderComponent,
MenuComponent,
LoginComponent,
RegistrationComponent,
BarCodePipe,
MyPipePipe
],
imports: [
UniversalModule, // MUST BE FIRST IMPORT. THIS AUTOMATICALLY IMPORTS BROWSERMODULE,
HTTPMODULE, AND JSONPMODULE TOO.
RouterModule.forRoot([ //RouterModule.forRoot method in the module imports to configure
the router.
{ path: '', redirectTo: 'user', pathMatch: 'full' },
{ path: 'user/:id', component: UserComponent }, //HERE ID IS A ROUTE PARAMETER.
{ path: 'login', component: LoginComponent },
{ path: 'registration', component: RegistrationComponent
},
{ path: '**', redirectTo: 'user' }
]),
FormsModule,
ReactiveFormsModule
],
providers: [UserService]
})
export class AppModule {
}
user.component.html
:-
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h2>Angular 2
- User Services</h2>
</div>
<hr />
<div class="ibox-content">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name </th>
<th>Description </th>
<th>URls </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users; let i =
index" class="tbl-row-border">
<td>{{user.id | barcode: true}}</td>
<td>{{user.login}}</td>
<td>{{user.description}}</td>
<td><a href="{{user.public_members_url}}" target="_blank">{{user.public_members_url}}</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Result –
I hope you are enjoying with this post! Please
share with you friends. Thank you!!