All language subtitles for 9. Displaying Images

We've now got all the data we need to start showing some images underneath our little pages later.

I'm gonna go back over to my template file.

I'm gonna go to the very bottom.

I'm going to place a div down here right outside of that NAV element inside this div I'm going to print

up an H for element it will show the title of the selected image to actually print out the title we

can use that interpolation syntax.

We'll take a look at the images array.

I'm going to look up the index inside there at current page and then I'll print out the title property

and we can do something very similar to get the image to show up as well.

So I'll place an image tag.

I'm going to use the property bindings syntax on the source property inside there.

I'll refer to images at current page and we'll get the URL off there.

I'll close off the image tag.

Let's save this and make sure that we can actually see these images.

Yep.

There we go.

So I've got some snow.

I can go previous to the city.

The forest the beach and so on.

Very good last thing we might want to do as just a quick little fix up here.

I'm gonna go back over to my app component.

I'm gonna change the current page I'll set the default back to 1.

Very good.

Now whenever this loads up gives me current page resume or index my bad would be at current pages 0

0 now and it loads up that page 1 to very at the very start.

We go next and go through okay.

So this looks pretty good.

We've got all the functionality here.

There's still a couple more directives I want to show you.

I also want to show you how we can put our own directives together as well.

The quick pause right here we start to take a look at a couple more directives in just a moment.