Filter items with a custom search Pipe in Angular 2

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

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.

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

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

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

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

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

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

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

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

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

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

Kevin
Kevin
~ 8 years ago

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

John Lindquist
John Lindquistinstructor
~ 8 years ago

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

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

Markdown supported.
Become a member to join the discussionEnroll Today