Using Pipe Results in Angular Templates

Let’s say you need to build a filter pipe which is responsible for filtering lists in your application.

A simple example would be:

We create a pipe that takes an array and search value, and filters the result based on the search value with a simple indexOf check.

Let’s use our pipe.

Great, everything works just fine. But now our product guy wants to show the user a label with the number of visible items.

I have already seen developers who solved the problem by doing the following:

But please, don’t, we are not DRY, and the pipe runs twice.

From Angular version 4, we have a solution for this situation, and I do not see any reason why your application needs to be in a lower version than that.

We can assign the pipe result to a local variable with the help of the as keyword.

If you try to run the code above, you will encounter an error:

Cannot read property ‘length’ of undefined

The reason is that the local variable is scoped to the hosting HTML element and its children.

The solution for this is to create a surrounding tag that uses ngIf, which exposes the local variable to the scoped template.

Now we are good.

Live demo from StackBlitz. Try editing the code yourself.

Follow me on Medium or Twitter to read more about Angular, Vue and JS!