Angular 7 Pipes

In Angular 1, filters are used which are later called Pipes onwards Angular2. In Angular 7, it is known as pipe and used to transform data. It is denoted by symbol |

Syntax:

Pipe takes integers, strings, arrays, and date as input separated with |. It transforms the data in the format as required and displays the same in the browser.

Let's see an example using pipes. Here, we display the title text in upper and lower case by using pipes.

Example:

Define a variable named "title" in component.ts file.

Use the pipe symbol in component.html file:

Output:

Run ng serve and see the result. You will see the following result.

Here, you can see that pipes have changed the tittle in upper and lowercase.

Angular 7 Built-in Pipes

Angular 7 provides some built-in pipes:

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

You have seen the lowercasepipe and uppercasepipe examples. Now, let's take some examples to see how the other pipes work.

Example:

Define the required variables in component.ts file.

component.ts file:

Use the different built-in pipe symbols in component.html file:

component.html file:

Output:

You can see the use of all built-in pipes here:

How to create a custom pipe?

To create a custom pipe, create a new ts file and use the code according to the work you have to do. You have to import Pipe, PipeTransform from Angular/Core. Let's create a sqrt custom pipe.

component.ts file:

Now, it's turn to make changes in the app.module.ts. Create a class named as SqrtPipe. This class will implement the PipeTransform. The transform method defined in the class will take argument as the number and will return the number after taking the square root.

As, we have created a new file so, we need to add the same in app.module.ts.

Module.ts file:

Now, use sqrt pipe in component.html file.

component.html file:

Output:

Example of Custom Pipe
Square root of 625 is: {{625 | sqrt}}


Square root of 169 is: {{169 | sqrt}}