Video Tutorials

Policy

Twitter LogoFacebook Logo
Pipes in Angular
Learn what are and how to use Pipes in Angular
By: King Wai Mark

Pipes allows us to transform our data inside our HTML page.


For example, if we have a plain number in our HTML page, it will display the number as it is in the browser as we would expect.

100000

But what we if want to add commas to separate the digits?

We may create a function and apply it to the number.

function addCommas(string){

   return ......;
}

However, Angular comes with some built-in pipes that we can use to format our data such as numbers, dates, and currency.


To add a pipe, put the pipe symbol after the expression in the interpolation statement and then provide the pipe you want. 

<p>

   {{ value | pipe }}
</p>

Let’s see it in code.

We have a simple paragraph element that displays a number from the class.

<p>

   {{ myNumber }}
</p>

export class AppComponent {

   myNumber = 100000;
}

We can apply the number pipe and it would add commas to our number.

<p>

   {{ myNumber | number }}
</p>

For a list of pipes, you can visit the Angular documentation website and read more.

https://angular.io/api?type=pipe

If we take a look at the documentation for the number pipe, we can see how it can be used and the parameter it contains.

{{ value_expression | number [ : digitsInfo [ : locale ] ] }}

To insert values for parameters, put a colon symbol after the pipe and then the value.

We can use 3 to add 3 spaces to the left and then .2 to add 2 spaces to the right.

<p>

   {{ myNumber | number: '3.2' }}
</p>

If we save the project and go to the browser, we will see a minimum of 3 digits on the left of the decimal and 2 digits on the right because we have 3.2. 

100,000.00

Creating your own Pipes

To create a pipe, execute the ng generate pipe command.

ng generate pipe Multiply

The command will create a TypeScript file with all the code for our pipe to operate and add it to the app module file so it can be used in our app.

Inside the TypeScript file is a pipe decorator that is used to indicate that this file is a pipe and the value from the name property is the name we call to apply the pipe.

@Pipe({

   name: "nultiply"
})
export class MultiplyPipe implements PipeTransform {
   ....
}

The transform method is where we write our logic to transform the data. It gets call when the pipe is applied to a value.

@Pipe({

   name: "nultiply"
})
export class MultiplyPipe implements PipeTransform {

   transform(value: unknown, ...args: unknown[]): unknown {
       return null;
   }

}

The value parameter returns the value that the pipe is applied to. and the other parameters are the optional parameters that we can set to change the outcome of the data.


Let’s say that this pipe is used to multiply a number by 3. Change the type of the incoming value to number to indicate that this pipe is only applicable to a number and then change the return type of the method to number to indicate that it will return a number back to the outside.

   transform(value: number, ...args: unknown[]): number{
       return null;
   }

In the return statement, return the value multiplied by 3.

   transform(value: number, ...args: unknown[]): number{
       return value * 3;
   }

So, when we apply this pipe to a number, it will return the result of the number multiplied by 3.

Go to the app component HTML page and the apply the pipe to the number. 


We can apply multiple pipes by separating each pipe with the pipe symbol.

<p>

   {{ myNumber | multiply | number: '3.2' }}
</p>

So right now, it will multiply our number by 3 and apply the numbers pipe as well.

300,000.00

Adding Parameters & Arguments to Pipes

Let’s say that we want to insert a number to change the amount to multiply.

{{ myNumber | multiply: 15 | number: '3.2' }}

We need to add a parameter in the transform method of the pipe to accept that number. Remove the default parameter and replace it with a number paramter.

   transform(value: number, multiple: number): number{
       return multiple? value * multiple: value * 3;
   }

Now, instead of multiplying by 3, we can provide our own multiple. If we do not provide any arguments to our pipe, it will use the default value of 3 to multiply our number.

Recap

Let’s take a moment to recap what we have learned.

1. We learned how to use apply pipes to our data and transform it.

2. We learned how to utilized parameters of the pipes to alter the outcome of the data.

3. And we also learned how to create our own custom pipes.


Sign In