Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Angular 2 is Beta

    Using Pipes to Filter Data

    John LindquistJohn Lindquist

    Pipes allow you to change data inside of templates without having to worry about changing it in the Controller. Creating a custom Pipe is as simple as giving it a name and a transform function that output what you expect.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Pipes are mostly what filters were in Angular 1, where you put a Pipe inside of a binding, the name of the Pipe, like uppercase, hit save, and you can see that each of my todos will switch to uppercase.

    Angular 2 ships with a very limited set of Pipes. Don't expect to be able to do more than uppercase, lowercase, json, and very simple things. Before you have to write your own. Let's go ahead and write our own first Pipe, because it's much more interesting to filter out this array of todos rather than just manipulating a simple string.

    We'll start with writing a Pipe that can find each todo that starts with the letter "S." To create a Pipe, we'll come and create a new TypeScript file, we'll call it search-pipe. I'll import Pipe from angular2/core, and Pipe is a decorator that you toss on top of the class, just like component is.

    All we are going to give it is a name of "search," and then we'll export a class of SearchPipe. Our Pipe decorator is going to expect our SearchPipe class to have a transform method, which it knows it can call to take the input, and then output something based on whatever we implement inside of here.

    The input, we'll call it value, it's actually going to be an array of todos, and the output can be value. It will basically input and then output the exact same thing. To use this, I'll import my SearchPipe from search-pipe, and then toss it in the array of Pipes.

    You can just think that my template here has directives, it has Pipes, and each of those need to be put in arrays. The template knows where to look for those. Because I named my Pipe search, I can add it onto my array here, and right now, it doesn't do anything because it just returns that exact same result set.

    What I want to implement is returning a filtered set. If I say value.filter because filter is a method on array, and then I'll use an arrow function to check against every item. An item is going to be a todo model. My item has a title, and I am going to check if it starts with the letter "S."

    Todo model, the string of title, and strings have a method called starts with, which can check for the letter S. Hit save, and it has filtered out every todo model which doesn't start with the letter S.