Creating Pipes are done using angular-cli. To do that, let’s open our integrated terminal.

1

  • Go to View>Integrated Terminal
  • Or use the shortcut key combination shown

In the terminal, type the command ng g pipe [pipeName].

2

Open the date-formatter.pipe.ts file and it will look like this.

3

  • All the needed parts of a pipe like imports, decorator and export class is already generated.

Now, lets us our pipe to show an user-friendly date and time. Go app.component.ts and create a date variable.

4

Add this date variable to the file app.component.html.

5

6

Go back to your browser and date is now set. This may seem good enough but our goal is to make it user-friendly. This is where Pipes come into the picture. Let’s format the date using the pipe we created.

7

 

  • To add the pipe use the character “|” and set the date’s attributes as shown.
  • dd/mmm/yyyy is for the day, month and year hh:mm is for the hours and minutes and a stands for am/pm.

 

 

Save your work and go back to your browser.

8

Congratulations! You’ve now successfully added a pipe to your date.

On the next article, we will discuss “Built-in Directives: *ngFor”.

JOIN THE ANGULAR ACADEMY!
$100,000 is the average annual salary of talented software developers and your chances of getting this salary get better by learning Angular 2 today!

Sign up now and make the first step towards upgrading your skill set.

PLUS: Get up to 75% OFF our Angular 2 course in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.