All language subtitles for 7. Conditionally Disabling Buttons6

Let's continue working on our application.

The next thing we're going to do is add in these previous and next buttons on the left and right hand

side of our list of numbers that these two buttons are going to be hard coded in.

So they're not going to be placed inside the energy for DirecTV.

Once we place them we are gonna have to make sure that we conditionally show the disabled class on them.

If we had the disabled class on that L.A. element that's going to show up as gray and not be clickable

which is definitely what we want back inside my template right underneath the L element but above the

existing l I can add in another ally with the class of page dash item as well.

And inside that Ally I'll show an anchor tag with a class of page dash link and I'll give it some hard

coded text of previous or the R evey short from previous then I can duplicate that.

Ally I'll put it on the other side of our energy for DirecTV ally and right down there I'll change the

name on that one to next okay.

Now if we save this and flip back over we'll see that whenever we have page number one selected the

previous button is enabled by I can kind of like mouse over it and it's very clear that I could probably

click on this and change a page.

As we mentioned at the start of this application if we are on page one or the last page we probably

want to make sure that the previous or next button gets disabled we can once again use the energy class

directive to achieve that.

We're gonna take a look at whatever the current page property is on our app class.

And if the current page is equal to one or the last page we can conditionally add on the disabled class.

So let's figure out how to do that.

I inside my editor I'm going to go to my app component class.

I just want to remind you very quickly that we've got this current page property.

And over time we're going to eventually update the value of this current page as a user clicks on some

different buttons inside of our pages later go back inside of my templates I'll find an ally that we

just added in the previous button.

I'm going to give myself a little bit of space on their and then I'll once again use the energy class

directive though in this case we want to conditionally apply the class disabled.

I'm going to use that kind of object syntax we use down here once again I'll put in an object and I'll

say disabled is gonna be applied whenever current page is equal to zero.

So if we are at the very first page I want to disable this first button they'll save this look back

over and sure enough now that first button right there is disabled it doesn't get highlighted it's kind

of great out definitely what we want now we can do the same thing to the last button as well I'm going

to copy that and G class directive that we just wrote out we'll go down to the last ally down here that

we just created a paste in the energy class and now in this scenario rather than showing disabled whenever

current page is equal to zero we instead want to apply disabled whenever our front page is equal to

images not length minus one.

And let me zoom out so you can see that line and I will New Line it as well just to make it easier to

see

for all the zooming OK.

So now to really test this out we need to be able to modify our current page property for right now

let's just go back over to our app components and we will manually change the value of current page

right now I have four images total I'm going to change current page to three.

Remember this variable is zero index.

Now I can't flip back over I have my last page selected and the next button is now great out it so it

looks pretty good though quick pause right here and continue in just a moment.