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 1023 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.

Filter items with a custom search Pipe in Angular 2

3:15 Angular 2 lesson by

This lessons implements the Search Pipe with a new SearchBox component so you can search through each todo. It also demonstrates the patterns used for components to interact with each other. Often generic components are used for handling user input then they forward on those events (using Outputs) to components more specific to your application.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

This lessons implements the Search Pipe with a new SearchBox component so you can search through each todo. It also demonstrates the patterns used for components to interact with each other. Often generic components are used for handling user input then they forward on those events (using Outputs) to components more specific to your application.

Avatar
Kevin

This was pretty clear to me, except how they have (input) = "update... , or whatever. Is (input) something special you use for actual input fields?

Avatar
John

(input) is simply capturing the "input event":
https://developer.mozilla.org/en-US/docs/Web/Events/input

Just like capturing (keyup), (keydown), etc.

In reply to Kevin

I'm going to refer back to the to-do model just a little bit, so we can add the default status when it's initially created. We'll move the status as a parameter in the constructor, get rid of the semi-colon. That's basically copy and pasting. I'm going to add a few more to-do models into my to-do service.

Now we have some that are already completed, and some that are already started, so it's just more data to work with as we use a search pipe. I'll bring our search pipe back in. If you remember where we left it, it only allows us to find the things that start with the letter S.

Instead, let's extract this to a term, add it as an argument that gets passed in through this arguments array. Then in the to-do list, we'll do colon and a string of S, hit Save.

I get the same result. We'll try out C. We can see it's still working, so now we can extract this term to an input, and then build a component that's going to pass in a search term.

We'll go ahead and add a search box. I'll quickly stub this out. I know I'll need output and event emitter, since it's going to update a term each time I type.

We'll set up our output of update which will be a new event emitter. Then any time the input updates, we'll send out the update emit and we'll grab the value off the input. Also, when this component is ready, so ng on emit.

We'll send out the initial value that this is going to be, which is just an empty string. In our main file we'll go ahead and add the search box, import, add it to our list of directives, and drop it in our template.

We know we have an output of update and that the term is going to be the event that comes out in our to-do list as an input of term which can be the term that's being updated by our search box. Now we can hit Save. We can start typing in the search box, S for sleep, E for exercise, eat, and earn.

Switch over to the completed, D for dance, C for charm. We basically get the same thing as last time where we created an input of this term which will be passed into the pipe. We defined it as an input here, in the main. We have the input coming in which is being assigned to the term.

The term is being set to the event from an output. Then the search box is a simple component where the output is emitting the input's value. ng on emit does it once the component is initialized. Then every time the input changes or you type in the text box, it just sends out the input's value.

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