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

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.

Build a select dropdown with *ngFor in Angular 2

4:21 Angular 2 lesson by

This lesson walks you through building a component using ngFor on a select dropdown with options to pass in a param into the Pipe.

Get the Code Now
click to level up

egghead.io comment guidelines


This lesson walks you through building a component using ngFor on a select dropdown with options to pass in a param into the Pipe.

Sebastien Arbogast

With the latest version of everything, if I console.log() the value of status inside the Pipe at the beginning of the transport method, I get just "s" instead of "started". Was there a recent change in the way the list on inputs is passed to a pipe? Or did I do something wrong?

In reply to egghead.io
Sebastien Arbogast

FYI, I just tested removing the destructuring and it works:

    name: "started"
export class StartedPipe {
    transform(value, status:string) {
        return value.filter((item)=>item.status === status);

So it seems Angular has changed the way it sends pipe parameters.

In reply to Sebastien Arbogast

Correct, custom Pipe arguments changed for the Release Candidate. I'll be updating these soon.

In reply to Sebastien Arbogast

Let's pass a value in our started pipe so that we can choose whether we want it to be started, or completed. The way that we do that is by adding a colon, and then, the value we pass in. We'll start with started as a string.

Then in our started pipe, after the initial value of the parameters, comes in as an array. I'm going to de-structure this array and call the first item in the array status.

Now, instead of the string started over here, I can just say status. Because using this de-structring syntax, the first item in the array is just status. I'll save. You can see it works the same if I come over here, change this to completed. Hit save. They all go away.

Now, let's extract this string into an input called "status." In our to-do list, we'll add an input called "status." Make sure we import input, then, back in our main file in our list, we'll have an input called status. I'll toggle this back to the string of started. You can see we're showing all of this started to-dos again.

The string is going all the way from the main file of my app into the to-do list here, into the pipe here, and then, filtering out the array of to-dos.

We can take this one step further and create a component called "status selector." We know that it will have an output called "select." Whenever that event is emitted, we'll go ahead and take this status, change it to status, then, we'll set the status to the event that comes through.

Now that all that's left to do is implement this status selector. I'll go ahead and create that real quick.

To make this work, we'll have an array of status of started and completed, we'll have an output called select. Again, this output select is just going to be this guy right here. The event we send out needs to be the string we want selected.

We can actually start by saying NG on and nit, where I say this select, emit, and I'll emit this status as zero. Make sure we import all this stuff. Import status selector from status selector. Add it to my directives.

I forgot one more thing with the select. I need to add the event emitter up here. Import the event emitter. It emitted initially the event started here, which comes through as started is assigned to status, and status is pushed into the input the to-do list.

The to-do list takes that input, passes it into the filter, or the pipe, as they're called. The pipe takes that from this array and filters the to-dos based on it.

To configure this in our options, we'll go ahead and say NG4, status of statuses. On my select, we'll handle the change event and basically forward on the change event to our select event emitter.

Select, emit, and it'll grab the event.target.value. If you've worked with events, that's a pretty common thing. The target's going to be the select. It will just grab the value off of it.

It might even make sense to make this a ref, which we'll just call "SEO." Instead of event.target, you could say "SEO.value." Then, just make sure these options have the status listed in the NG4 so that they show up in the drop down.

Whenever I change these, completed, started, complete 1, completed, started again, go back to started, add another, complete that, completed. We have that entire flow working for us.

Featured course:

Create an SVG Icon System

Create an SVG Icon System

Joel's Head
Why are we asking?