Name: Build a select dropdown with *ngFor in Angular 2
Uploaded: 2016-01-06T11:00:45-06:00
Description: This lesson walks you through building a component using ngFor on a select dropdown with options to pass in a param into the Pipe.

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

https://app.egghead.io/api/v1/lessons/angular-2-build-a-select-dropdown-with-ngfor-in-angular-2/subtitles

Build a select dropdown with *ngFor in Angular 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Build a select dropdown with *ngFor in Angular 2

Share this video with your friends