Create Angular 2 Custom Pipes

How To Create and Use custom Pipes in Angular 2?

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.

Stayed Informed - What is Pipes? Why use Pipes?

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!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book