Manipulating data with pipes
Pipes allow us to transform the outcome of our expressions at the view level. They take data as input, transform it into the desired format, and display the output in the template.
The syntax of a pipe consists of the pipe name following the expression we want to transform, separated by a pipe symbol (|
):
expression | pipe
Any parameters are added after the pipe name, and they are separated by colons:
expression | pipe:param
Pipes can be used with interpolation and property binding in Angular templates and can be chained to each other.
Angular has a wide range of built-in pipe types already baked into it:
uppercase
/lowercase
: It transforms a string into uppercase or lowercase letters.percent
: It formats a number as a percentage.date
: It formats a date or a string in a particular date format. The default usage of the pipe displays the date according to the local settings of the user's machine. However, we can pass additional formats...