All language subtitles for 8. Changes Pages6

We've got many aspects of this thing put together.

Let's now make sure that whenever user clicks on say a number we update the value of that current page

property.

But to do so I'm going to flip back over to my template inside of the ally where we have our energy

for DirecTV.

I'm going to add a click event handler on the anchor tag itself.

Here's my anchor tag.

I'm going to watch for the like event.

And remember we can do that by adding on a set of parentheses around the name of the events that we

want to watch for.

Now whenever a user clicks on this anchor tag we're going to run whatever code we put inside those double

quotes inside of here.

We could call some method on our class very easily.

We can call a method back over on the app components that will update the value of current page where

alternatively we could just write in a statement right here to update the value of the current page

property.

We could say current page equals I that's going to take a look at the current page property on our component

and update it to whatever I is remember.

I is going to be the index or the image that we are currently iterating over this syntax right here.

It's just a bit more concise a little bit easier to write out than the old method.

Back inside the app components although we definitely can do that it's not going to say this look back

over now should be able to click on each these different different buttons and see it updates.

I can also see that the previous and next buttons it enabled or disabled as soon as I go right next

to them but this looks pretty good.

Let's now implement something very similar to the previous button and the next button.

Make sure that whenever we click on those we adjust the current page property as well to first find

the button that we are rendering for the previous button and then on the anchor tag for that.

I'll once again add in a click event handler and I'll say current page is current page minus one.

Once again we could define a helper method on the class to do this but that's a lot of extra code will

be easier to just write it in line.

For this example

now we can go down to the very last button here is our last ally right here.

Find the anchor tag once again Watch for click.

I'll say current age is current age plus 1

OK.

I think this looks pretty good.

So let's save this and do one more test.

Back over here.

I should now be able to click on previous.

Go back and next to go forward as soon as I get to the last link I can't click on Next anymore.

Now as soon as I get to the first one I can't click on previous anymore.

Let's say this looks pretty good.

All right.

So let's take a pause right here.

When we come back the next video we're going to make sure that we show some images on the screen.

We're going to start to take a look at yet another directive.