In part two of this lecture we converted a directive that we previously have written into a component and we saw how much simpler the whole component is. There's no function there's just a configuration object and so on. But the controller of the component is now enhanced with some life cycle methods and we're going to use them right now. Let's go back to our code editor and let's go to the ShoppingListComponentController and add a couple more methods that angular knows about. Within those methods again directly on the controllers instance. So, one of them is as we discussed was onInit. And onInit is a function. Again what I need the function name. And in this case we're just going to log that We are in $onInit. So, that way we could see that it's getting executed. Let's go to our browser and let's open up the console. You'll see that it is in fact being executed right here. This is only going to get executed once when the controller gets substantiated. Let's go back to the code editor and let's add one more method called $ctrl.$onChanges and that's also a function. And then there's a function that's going to have a changeObj that is going to get pass into us by the angular framework. Let's go ahead in console.log what the changeObj is. Let's go ahead and console.log that and we'll save that let's go back to our browser. And you see up front here it has a couple things. It has myTitle and items. Those are the things that actually first arrived, so to speak, when the whole thing got initialized. Let's actually take a look at this object as we keep changing stuff. Let's go ahead and put chips in here. Put 3 bags. And we'll add the item and see it got fired again. So, what got fired was the changes right, we could actually go back and actually put the word Changes here so we can see what's going on a little bit better. Okay, let's go back to the browser and we see now it says Changes. So, now we when we put Chips and we'll put 3 bags of Chips and we'll edit the Changes fires again. The dollar sign on Changes fires again. If we open it up you'll see that myTitle is the thing that changed. Let's open that up a little more. So, we can see it a little bit better. And the currentValue is Shopping List #1 1 items. It's right there. The previousValue was Shopping List #1 0 items. Now what happened to our items array? Why didn't that get changed? Why didn't that get passed in here? Well the reason it didn't get changed or didn't get detected here is because the only thing that is being watched are the items array. Let's go back to the definition of our component is the reference to that idle array. And the reference no matter what items we add into the array the reference to the entire array stays the same. If we were to change the reference of the array not inside of our component but outside of our component that out changes would fire it wouldn't include my items. But since the only thing that changed outside and its actually watching very closely so to speak is the title or myTitle that's the thing that fired and that's the thing I've got included in the changes object that we are looking at right here. Okay, let's go to yet another life cycle function called $ctrl.$postLink and I told you that $postLink is basically the same thing as the link function that we used before. So, let's go ahead and use it in the same way as we used it before. And that is we're going to make the shopping list that HTML have the error message slide out and slide up to disappear. In other words this is the place where we're going to manipulate the dump. Now please note this is not necessarily the best way to have animations in your template HTML. However my only purpose in showing this to you is to show you that you can manipulate the dump from the dollar sign post link. You might necessarily want to manipulate it in the way I am doing it right now, might want to have something much more complicated before you go to manipulating the DOM in this way. Okay, so what we're going to to do is willing display the warning message when somebody uses cookies as part of their shopping list. The first thing you to do is we want to make sure that this div was actually not visible to begin with and then it's going to slide out. So, what we need to do is need to remove this ng-if right here and save that and then go to our styles .CSS and add one property here called display none so ,it will not get displayed up front only we're going to display through the code. Then we're going to go to our app.js and we're going to setup a watch on the cookies and list function. The way we would do that is we need to scope variable, because we need the $scope.$watch is the function. The only problem is we don't really have a scope variable here. We haven't really injected yet. So, we're just going to go ahead and create an inject array $inject array. And so we could protect it from immunization. And we'll say scope here. That's what we need to inject and obviously inject scope right here into the actual ShoppingListComponentController. Okay, so now scope is available we can actually call the watch function and what we need to watch for is $ctrl.cookiesInList. And we need the parens to make sure it understands that this is not just a property this is a method that will need to get executed. And we going to to watch it with newValue and oldValue. That's going to be pass into us. Okay, so if newValue === true, if that's the case that we need to do something, else we need to do something else. So, here we need to basically Show warning and here we need to Hide warning. Okay, whoops, we don't need it uppercase. Here we go. Now the problem is that this function doesn't actually have the scope, element. It's not exactly the same as Link. So, how do we get at the actual element that is our component? Well, there's yet another service called $element. And in order to get that we need to inject it. So, let's go back and put a comma here and say $element and we'll put $element here as well. And we'll go back to our $postLink and let's go ahead and first of all, we'll go and just log it so you can see what that is. We'll say $element. Okay, so let's save that. Let's go back to our browser and you can see what it outputted. It outputted the shopping-list.ng-isolated-scope. That's our item right here. And that is coming from the $post link. So, that's how we get the parent item or the top item of our component. Let's go ahead and use jQuery to slide it down to show it and then slide it up to make it disappear. We need one more thing in order to use jQuery. You guessed it we actually need to download jQuery and put it in our folder and then reference it as part of our libraries that we reference here with the script tag. Okay, so I'm going to pause the video for a second. Get the jQuery and we'll continue in a second. Voila magic. jQuery-3.1.0.min.js we don't need to look at that code its ugly anyway. One more thing let's delete these couple of things that we don't really need here its from the previous lecture lets move it to trash. Okay, so we have the jQuery file here all we need to do now is reference it and we need to make sure to reference it above our angular import. So we'll say script. We're say src=jQuery-3.1.0.min.js. Okay, we did that. Okay, so now jQuery is available for us. We'll go back to our App.js and we could show the warning by saying var warningElem = $element actually represents an element as a jQuery object. So, we can say .find and we could say div.error so, it's going to again look only in the template of our component. It's not going to look through the entire HTML of our page which is really good because it's going to be much, much faster. And then we need to say warningElem.slideDown 900 milliseconds to slide down, so it'll be a little bit slower, so that's to show it and we could copy this over to Hide warning and we need to get the element again except this time we're going to slideUp to make it disappear. Okay. Let's save it. Let's go back to our browser. We can make this minimized. And we'll say Chips, 3 bags of Chips. And you see that's fine. And if we add Cookies in here and give it 3 bags of Cookies we do that you see it slides out or slides down to show us the warning. WARNING WARNING, COOKIES DETECTED. And if we remove the cookies It will slide back up and remove the warning from our HTML. So, this is how you use the lifecycle methods inside of your component controller.
