Angular Built-in Pipes
Let’s learn about Angular’s built-in pipes.
We'll cover the following...
Implementing custom pipes is quick and straightforward. However, we shouldn’t reinvent the wheel, if possible. There are many cases where the built-in pipes in Angular may help us. Therefore, instead of implementing everything ourselves, it’s a better idea to learn about the most commonly used pipes and utilize them when needed.
In this lesson, we’ll learn about four built-in pipes. These are some of the more useful ones, but we may check the complete list of pipes that Angular provides.
Dates
In the introductory lesson, we talked about issues we may potentially encounter when working with dates in an application. The key point here is that, most likely, we want to keep the date format consistent across the application. Trying to achieve this may lead to code duplications and potential bugs.
Pipes are perfect for such tasks when we have data that must be transformed in the same way. However, implementing a pipe that formats dates can be challenging. Fortunately, Angular has a built-in pipe precisely for this purpose.
The pipe is called DatePipe
, and it formats the date
using JavaScript’s Date object according to our needs. The format can be passed as additional parameters in the template where the pipe is applied or set up globally using the injection token. We’ll focus on setting through parameters.
The syntax is straightforward to use and remember. The pipe’s name ...