Creating Pipes are done using angular-cli. To do that, let’s open our integrated terminal.
- Go to View>Integrated Terminal
- Or use the shortcut key combination shown
In the terminal, type the command ng g pipe [pipeName].
Open the date-formatter.pipe.ts file and it will look like this.
- 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.
Add this date variable to the file app.component.html.
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.
- 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.
Congratulations! You’ve now successfully added a pipe to your date.
On the next article, we will discuss “Built-in Directives: *ngFor”.