Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 960 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Using Pipes to Filter Data

2:24 Angular 2 lesson by

Angular 2 is Beta

These lessons are covering beta software. We will make every effort we can to keep them updated and current, but while the syntax may change the concepts are what is important. If you notice an issue please post the fix or workaround in the comments if possible. Thanks!

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.

Get the Code Now
click to level up

Angular 2 is Beta

These lessons are covering beta software. We will make every effort we can to keep them updated and current, but while the syntax may change the concepts are what is important. If you notice an issue please post the fix or workaround in the comments if possible. Thanks!

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Theuy

Could we improve the code by leveraging the types definitions in the function parameters?

import {Pipe} from "angular2/core";

@Pipe({
    name: "search"
})
export class SearchPipe{
    transform(value:Array, [term:String]){
        return value.filter((item:TodoModel)=> item.title.startsWith(term));
    }
}
In reply to egghead.io

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?