How Pipes Work

Basic notation and usage

Pipes are classes marked by the @Pipe decorator, just like directives have the @Directive decorator on top of their class.

Here’s an example:

@Pipe({
  name: 'myPipe',
})
export class MyPipe {
...
} 

Pipes need to be declared in a module that uses these pipes. So, we need to remember to add these into the declaration field of our NgModule:

@NgModule({
  declarations: [
    MyPipe
  ]
})
export class MyModule {
}

Pipes usually contain logic that works for the entire application Therefore, it usually makes sense to declare them in the shared module of our Angular application.

How pipes function

Similar to directives, pipes don’t always work the same way. The logic implemented in each pipe varies, but there’s a pattern they all follow.

The essential part is the function in the pipe, which ultimately does all the transformation and generates the output. Let’s look at this example of a simple pipe below:

@Pipe({
  name: 'inBrackets',
})
export class BracketsPipe implements PipeTransform {
	transform(value: string): string{
		return '(' + value + ')'; 
	}	
} 

The example presents a pipe that wraps the text value in brackets. So, for instance, when we have a value of 100 and want to wrap it in brackets like this, (100), we can use this simple pipe.

The key observation here is that pipes have to implement the PipeTransform interface, which causes the transform function to be implemented. This is very important because Angular calls this function during runtime to transform data and generate the desired output.

The Transform function

The function transform is a simple function of the pipe’s class. This function must have at least one argument, the input data, and must return a value after the transformation, like this:

The transform function consists of these three things:

• Input data is what we want to transform. It’s provided as an argument to the function.
• Output value is obtained after the input data is transformed.
• Transform logic is the code implemented inside the function that carries out the transformation.

The exact implementation of the transform function depends on our needs. But, first, we just need to follow the pattern of transforming input data into the output value.

Apply pipe

We have to use the pipe operator (|) in the template to apply a pipe. So, we need to put the pipe operator and the pipe name after the expression that we want to transform.

Let’s consider a pipe from the example above:

@Pipe({
  name: 'inBrackets',
})
export class BracketsPipe implements PipeTransform {
	transform(value: string | number): string {
		return '(' + value + ')'; 
	}	
} 

To apply it to the template below, we have to use the pipe operator and the pipe name which is inBrackets:

<p> {{ 100 }} </p>

Let’s check the code below:

<p> {{ 100 | inBrackets }} </p>

In this case, we use the BracketsPipe with 100 as input data for the transform function. The transform function wraps 100 in brackets and returns it. So, after this transformation, Angular renders the HTML as follows:

<p> (100) </p>

Here’s a fully working example of this pipe:

Multiple parameters

In the example above, we only had a single input value, but there may be cases where we want to pass additional arguments. We may think of those as transformation configuration parameters.

Parameters like these logically become the next arguments of the transform function:

@Pipe({
  name: 'inBrackets',
})
export class BracketsPipe implements PipeTransform {

	transform(value: string | number, curlyBrackets: boolean = false): string {
		if(curlyBrackets) return '{' + value + '}'; 

		return '(' + value + ')'; 
	}	
} 

In this example, CurlyBrackets is the second argument, and it’s false by default. If it’s specified as true, the transformation changes so that the value is displayed in curly brackets rather than in conventional ones.

To add additional parameters, we must make some adjustment to the template code rather than sending a single value, like this:

<p> {{ 100 | inBrackets }} </p>

For instance, to pass true to the CurlyBrackets parameter, we must add a colon (:) after the pipe name along with the second argument value as follows:

<p> {{ 100 | inBrackets:true }} </p>

We may add as many parameters as we like. Each one must be preceded by a colon.

Summary

The main point to remember about pipes is that a pipe uses the transform function to convert the input data provided as function arguments, to the output value that’s displayed in the template.

To apply a pipe, we use the pipe operator and the name of the pipe, like this:

<p> {{ inputValue | pipeName }} </p>