Using Pipes to Filter Data

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

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.

[00:00] 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.

[00:12] 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.

[00:32] 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.

[00:51] 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.

[01:11] 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.

[01:31] 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.

[01:50] 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."

[02:12] 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.

egghead
egghead
~ 13 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today