[SOUND] Okay, so we're back in our code editor and I'm located in Lecture 33 which is located in fullstack-Course5, examples folder. And this is basically a copy of Lecture 30, but with some cleaned up code. So we named this one Shopping List Component Tab. And you can see it's pretty much the same as before. We have our controller. We have this list that last removed which is something that the control will display once something gets removed from list. Now, things get removed from a list using this shopping list directive well at least its a directive for now, we're going to take that shopping list and turn it into a component. And you can see we're passing in items passing in the title and passing in unremove and we'll discuss that this looks exactly the same as we actually did before where index is something that is an output from the component or from the directive in this case. Let's go ahead and go to app.js and the first thing you see is we forgot to change this into component. It's a component ShoppingListComponentApp. Okay, so the first thing we want to do is we want to change the shopping list from being a directive to being a component. Well, let's go ahead and change this out to component. And now, instead of having a function as the definition for our shopping list we're going to have a simple configuration object. So, it makes it much easier. And we can even do this straight in line, since it shares a bunch of configuration properties and that's about it. Okay, so the first thing our component will have is a shopping list.html, which is going to be our template. So that stays exactly the same. We'll also need a controller because we're going to put some behavior into it. And let's call it ShoppingListComponent. Let's say component app component controller. So,we have our ShoppingListComponentController. We're not going to define the controller as. And we'll let angular just define the dollar sign ctrl for us automatically as the label that's going to reference our controller instance. In the next thing we need to do is what are our inputs and outputs which are called bindings instead of scope, and this is all sitting on the I sell scope. And really all we need to do is copy these three things because it's exactly the same as before. So, we have the items which is a one way binding object, we have at title. It is going to be mapped to my title and you can see since the at sign it means its a dumb attribute value binding and we also have unremoved which is going to get mapped to unremove or un dash removed in the parent HTML and its going to be a reference function so this is going to be a callback back to the parent controller. And, that's pretty much it, we can actually take this function, right here. And, we could comment it out, cause we don't need it anymore, for now.. In fact, we could just, actually, simply, erase it. We don't need that anymore. And, we need to define the ShoppingListComponentController. In fact, what we're going to do is just, copy some code here. And, this used to be a shopping list directive controller. We'll make it into a ShoppingListComponentController, except this time instead of calling it a list since we don't that it's a $ctrl let's go ahead and call it $ctrl equals this. Now, make sure you don't make a mistake. This is just a local variable, I could call it whatever I want. It doesn't make any difference but since it's named exactly the same as the one that we're going to be using in our shopping list that HTML template, we might as well call it the same. So ,we'll know it's referring to the same thing which is the this, the instance of our component controller. The only thing is is we need to change that now everywhere it says list, it should now become $ctrl and I believe that's pretty much it. So, let's save that and we see that our component controller has that same method we used before called cookies and list. And what it's doing is it's slipping through all the items that are attached in our bindings and looking that any name of any item has the word cookie in it, it will signal this to true and a warning message will pop up on the screen that will slide out or something like that. Okay, so let's go to the shoppingList.html, which is our component template. And we know that we don't have list pointing to the instance of the controller for the component. We now have $ctrl pointing to that. So, let's go ahead and copy that, and substitute anywhere we see list with $ctrl. And I believe that's pretty much it, these two things right here. And we can save that. And now, if we go to our browser, we should see the title right here and we don't. So, we messed up somehow, or I should say I messed up somehow. And it says here that it cannot read length property of undefined in app.js:22. Well, let's go back to our code editor, I have that app.js:22 is right here. So, it says it cannot read the length property of this item. Somehow that items array is not really being passed in even though we passed it in right here as a one way binding. Well, what do you know? It's bindings not binding so that would make sense let's go ahead and save that. Let's go back no errors. It's always good not to have errors. Okay, so now we can start entering things in chips. Four bags of chips and there is one. And we say cookies, the warning will pop up since we have a ng -if statement right on the div that has the warning in it. Okay, so let's take a look at this button here. It says controllerctrl.onRemove, and it's passing this thing right here. It looks a little bit ugly for the HTML template to have stuff like that, so instead. Why don't we go ahead and change that, and let's say control remove, and actually just pass the index in it, instead of having all that. And we'll actually write, the control, the remove method, on our controller. So, let's go ahead and save that. Let's go back to app.js. Let's find our controller that ShoppingListComponentController. So, we already have one method called cookiesInList. Let's go ahead and put a couple of spaces here. Let's say $ctrl, and we'll say remove. And that's going to be a function, we don't need the name. Let's put the semicolon here. And this function has to call whatever function that we defined in our binding. So, onRemove. So therefore, it's going to call $ctrl on remove, and we need to provide it the index. Well, I forgot actually to put the index in here, so that's what's getting passed thin from the template. And, instead of just saying index here, that really wouldn't work. We actually have to give it an object, the key value here who's key has to match whatever it is the name that we used in the binding, unremoved binding of our shopping list components. So this case is just index. So let's go back to app.js and actually let's call it something else. Let's call it myIndex. That way, at least it'll be a little bit more understandable. So this index, the key comes from index.html, that's that index right here that's the name that we're mapping. And the value is going to be myIndex. Okay, so now we have it a little bit cleaner. In the shoppinglist.html, the button just goes on click and it calls a method on the controller directly, passing it the $index that is provided by the ng-repeat directive, which then gets passed into my remove function that I defined here right in the controller. Which calls the reference function that was passed in from the parent controller with the map of key value. So put another space right there. Let's save that, let's go back to our browser. And let's say Chips, 4 bags of Chips. And we'll add that and when we say cookies let's make 5 bags of cookies and add. Once we add you see that the warning shows up immediately and when we remove cookies the warning disappears and the cookies item gets passed to our parent controller and that is why we're able to display, as our parent controller, that the last item removed was cookies. Okay, so that's how simple it is to create a component. In part 3 of this lecture, we're going to look at the life cycle methods that the component API provides and use it to enhance this little Shopping List application a little bit.
