Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,690 --> 00:00:05,230
We've now got our list of pages being rendered out on the screen.
2
00:00:05,230 --> 00:00:10,390
Now let's make sure that by default when user first comes to application we highlight this first number
3
00:00:10,390 --> 00:00:11,460
right here.
4
00:00:11,470 --> 00:00:15,790
Want to make sure that is shown as blue that the user understands which page they are currently looking
5
00:00:15,790 --> 00:00:16,540
at.
6
00:00:16,660 --> 00:00:20,480
If we go backwards the bootstrap documentation and scroll down just a little bit.
7
00:00:20,590 --> 00:00:26,300
There's a section here called disabled and active states in order to get a number to show up blue.
8
00:00:26,350 --> 00:00:32,440
We're gonna find the ally that is wrapping that number and add on the active class name to it.
9
00:00:32,440 --> 00:00:36,090
Let's figure out how we can actually accomplish this get started.
10
00:00:36,090 --> 00:00:40,240
I'm going to flip back over to my app component class and suddenly have component class.
11
00:00:40,250 --> 00:00:47,460
I'm gonna add in a new property that I'm going to call front page and by default I'll initialize this
12
00:00:47,460 --> 00:00:48,890
to be zero.
13
00:00:48,940 --> 00:00:53,900
This property right here is going to keep track of what page the user is currently looking at a default
14
00:00:53,910 --> 00:00:58,160
they're going to be looking at the first image or the first page of data.
15
00:00:58,200 --> 00:01:04,710
Now we can use this current page in combination with the index variable right here to decide whether
16
00:01:04,710 --> 00:01:10,890
or not we should apply some particular class name to this l I element though on the fly element we're
17
00:01:10,890 --> 00:01:15,810
going to have to add in some kind of logic to the same to figure out whether or not we want to apply
18
00:01:16,020 --> 00:01:22,700
that active class name do so we're going to use another directive unlike the energy for directive.
19
00:01:22,710 --> 00:01:26,790
This new one that we're going to take a look at is an attribute or property directive.
20
00:01:26,820 --> 00:01:31,460
It means that it's going to change a property on this light element.
21
00:01:31,500 --> 00:01:32,780
So here's how it's gonna work.
22
00:01:32,920 --> 00:01:34,590
University myself a little bit of space
23
00:01:37,530 --> 00:01:43,470
and then right after class I'm going to add in the energy class directive the energy class directive
24
00:01:43,530 --> 00:01:49,170
is extremely flexible and allows us to specify some different number of classes to apply to an element
25
00:01:49,560 --> 00:01:52,390
based on some different forms of logic.
26
00:01:52,410 --> 00:01:56,090
Let me show you the best way of writing out what we're trying to do right now.
27
00:01:56,100 --> 00:02:00,720
Right now we're trying to decide whether or not to put on that active class name depending upon whether
28
00:02:01,320 --> 00:02:06,830
the current age right here is equal to the variable.
29
00:02:06,840 --> 00:02:14,870
I inside of those double quotes I'm gonna write out a set of curly braces just one and I'll write out
30
00:02:14,870 --> 00:02:25,430
inside there active is going to be I equal to burnt h like so who we're creating right here is not some
31
00:02:25,430 --> 00:02:30,470
kind of interpolation syntax as we saw down there with those double curly braces instead this creates
32
00:02:30,530 --> 00:02:37,070
an object and on the object we're adding on the name of the class that we want to add as a key and the
33
00:02:37,070 --> 00:02:43,880
value for that is going to return a boolean value if this evaluates to true an active will be applied
34
00:02:44,000 --> 00:02:45,830
as a class to that Ally.
35
00:02:46,160 --> 00:02:52,400
Otherwise if this evaluates to false an active will not be applied as a class let's say this and see
36
00:02:52,400 --> 00:02:59,950
what happens I can flip back over and I'll see that by by default that first page gets highlighted if
37
00:02:59,950 --> 00:03:07,010
I pull open my element inspector and click on that element I can see very easily that that Ally did
38
00:03:07,020 --> 00:03:14,400
in fact get the active class but none of the other allies got that class at all OK so that's the NGO
39
00:03:14,440 --> 00:03:18,970
class directive as I mentioned it's very flexible in nature and there are several different ways we
40
00:03:18,970 --> 00:03:23,290
can make use of it this right here is one the most common and useful ways of making use of it.
41
00:03:23,320 --> 00:03:28,120
So we're gonna define the object of a couple of different key value pairs for each key is the name of
42
00:03:28,120 --> 00:03:33,280
the class and the value is going to be some kind of boolean expression let's take a quick pause right
43
00:03:33,280 --> 00:03:36,940
here when we come back the next video we're going to take a look at some different ways of using the
44
00:03:36,940 --> 00:03:38,170
energy class directive.
5250
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.