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.