Pipe - Angular2

Pipes in Angular
A pipe takes in data as input and transforms it to a desired output.

1. Transform data before display
2.  Built in pipes include lowercase, uppercase, decimal, date, percent, currency etc
3. To apply a pipe on a bound property use the pipe character " | "
   {{employee.code | uppercase}}

We can also chain pipes

{{employee.dateOfBirth | date:'fullDate' | uppercase }}

Pass parameters to pipe using colon " : "

{{employee.annualSalary | currency:'USD':true:'1.3-3'}}

{{employee.dateOfBirth | date:'fullDate'}}

{{employee.dateOfBirth | date:'dd/MM/y'}}

Before starting with this article, I would recommend you setup your development for Angular 2.

1- Open Visual Studio Code.
2- Open the Integrated Terminal from View Menu.
3- Create a new Project "ngDemo" with the Command Line "ng new [Project name]"
4- Run you Project with command line "ng serve --port 4500".

5-Click on localhost:4500 url by pressing ctrl button. it'll open the browser and run your web        
      application.
6- Add a folder "PipeComponent" inside of src/app directory.
7- Change Directory
                       cd src\app\ PipeComponent\

8- Add a Component
                       ng g c pipe -is --flat --spec false

It'll add two file in PipeComponent folder.
             pipe.component.html
             pipe.component.ts
 And It'll add the pipe component in app.Module file.

9-  Add a variable named "company" in pipe.component.ts file.

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-pipe',

  templateUrl: './pipe.component.html',

  styles: []

})

export class PipeComponent implements OnInit {

company: string;

  constructor() { }

  ngOnInit() {

    this.company="DOTNET GURU";

  }

}

10- Now use this variable on pipe.component.html file.

<h2>Pipe</h2>

<h3>{{company | lowercase }}</h3>

11- The above code is using pre-built pipe (lowercase) in angular js.

[Note: Before running this application you need to set PipeComponent in bootstarp property in app.Module.ts file.]

12- Now see the output
       It changed the company name from upper case to lower case.

Some Other builtIn Pipes are below:

• Lowercase
• Uppercase
• Date
• Currency
• Json
• Percent
• Decimal
• Slice - first argument as starting index and 2nd argument is length
• title - make every first letter of sentence capital 
• number- a.b-c; a is minimum number of digits before decimal. b is minimum number of digits after decimal. c is maximum number of digits after decimal.

Creating Custom Pipe.
13- Add a folder "Pipe" inside src/app/ directory.

14- Change the directory in terminal
                        cd ..         <Enter>
cd Pipe    <Enter>

15- Add the Pipe with command line
                        ng g p reverse      <Enter>
Here i'm creating a pipe with the name "reverse"  to reverse the characters of any word.

The above command a creates two files in Pipe folder. in the reverse.pipe.ts file add the below code to reverse the word. Ignore reverse.pipe.spec.ts file.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

  name: 'reverse'

})

export class ReversePipe implements PipeTransform {

  transform(value: any, args?: any): any {

    let result = '';

    for (let i = 0; i < value.length; i++) {

      result = value[i] + result;

    }

    return result;

  }

}

16- Now you are ready to use your custom pipe. use the reverse pipe in pipe.component.html.

<h2>Pipe</h2>

<h3>{{company | lowercase | reverse }}</h3>

17- Now see the output

Thanks and Regards

Suraj K. Mad.