133. Styling Active Router Links

Jul 15, 2026 05:30 · 5:01 · English · Whisper Turbo · 2 Konekte
Transkript sa a ekspire jodi a. Ajoutè pou depo perpétuel →
Endèks lekti
Montre sèlman
0:02
S… Speaker 1 (133. Styling Active Router Links)
We of course added navigation to our page,
0:04
S… Speaker 1 (133. Styling Active Router Links)
but one issue is that whilst it does work fine,
0:08
S… Speaker 1 (133. Styling Active Router Links)
we get no visual indication of what the currently active
0:12
S… Speaker 1 (133. Styling Active Router Links)
route is.
0:13
S… Speaker 1 (133. Styling Active Router Links)
It would be nice if the selected tab would change and
0:17
S… Speaker 1 (133. Styling Active Router Links)
that of course is only a CSS thing.
0:20
S… Speaker 1 (133. Styling Active Router Links)
Because if you check your app component here,
0:22
S… Speaker 1 (133. Styling Active Router Links)
you see we got this active class on the list item,
0:25
S… Speaker 1 (133. Styling Active Router Links)
which determines whether this is marked as active,
0:28
S… Speaker 1 (133. Styling Active Router Links)
if this link gets the right CSS classes or not.
0:32
S… Speaker 1 (133. Styling Active Router Links)
So it would be nice if we could dynamically set this class.
0:36
S… Speaker 1 (133. Styling Active Router Links)
I will remove it from here.
0:39
S… Speaker 1 (133. Styling Active Router Links)
And how can we now set it dynamically?
0:41
S… Speaker 1 (133. Styling Active Router Links)
Angular gives us a specific directive for this.
0:45
S… Speaker 1 (133. Styling Active Router Links)
The router...
0:49
S… Speaker 1 (133. Styling Active Router Links)
link active directive.
0:51
S… Speaker 1 (133. Styling Active Router Links)
And the convenient thing about this directive is you can add it to
0:55
S… Speaker 1 (133. Styling Active Router Links)
a wrapping element like we do here to the list item or
1:00
S… Speaker 1 (133. Styling Active Router Links)
also,
1:00
S… Speaker 1 (133. Styling Active Router Links)
of course,
1:01
S… Speaker 1 (133. Styling Active Router Links)
to the link itself.
1:02
S… Speaker 1 (133. Styling Active Router Links)
And it will attach the class you specify in between
1:06
S… Speaker 1 (133. Styling Active Router Links)
here, for example,
1:07
S… Speaker 1 (133. Styling Active Router Links)
active.
1:08
S… Speaker 1 (133. Styling Active Router Links)
So this should be a string.
1:10
S… Speaker 1 (133. Styling Active Router Links)
To that element it sits on now active on the link
1:14
S… Speaker 1 (133. Styling Active Router Links)
itself wouldn't do anything when using bootstrap Here for this tabs
1:18
S… Speaker 1 (133. Styling Active Router Links)
look we need to add it to the list item But this of course depends on which package
1:22
S… Speaker 1 (133. Styling Active Router Links)
or which CSS code you are using and here you could specify any class
1:26
S… Speaker 1 (133. Styling Active Router Links)
you want like my active class or whatever that is
1:30
S… Speaker 1 (133. Styling Active Router Links)
So here it is active to make it look nice in bootstraps world and
1:35
S… Speaker 1 (133. Styling Active Router Links)
I will add it to all my links here
1:38
S… Speaker 1 (133. Styling Active Router Links)
So now theoretically,
1:39
S… Speaker 1 (133. Styling Active Router Links)
all my links should receive this active CSS class
1:44
S… Speaker 1 (133. Styling Active Router Links)
once they are clicked or when they are active.
1:47
S… Speaker 1 (133. Styling Active Router Links)
So if we have a look at this.
1:50
S… Speaker 1 (133. Styling Active Router Links)
It seems to work because we still have home set as our active
1:54
S… Speaker 1 (133. Styling Active Router Links)
page, even though we removed this class,
1:56
S… Speaker 1 (133. Styling Active Router Links)
this active class we had there before.
1:58
S… Speaker 1 (133. Styling Active Router Links)
If I click servers,
2:00
S… Speaker 1 (133. Styling Active Router Links)
it gets marked as active too,
2:02
S… Speaker 1 (133. Styling Active Router Links)
and the same for users,
2:03
S… Speaker 1 (133. Styling Active Router Links)
so this works.
2:04
S… Speaker 1 (133. Styling Active Router Links)
But somehow,
2:06
S… Speaker 1 (133. Styling Active Router Links)
home is always marked as active.
2:09
S… Speaker 1 (133. Styling Active Router Links)
So that does not seem to work correctly.
2:12
S… Speaker 1 (133. Styling Active Router Links)
What's wrong here?
2:15
S… Speaker 1 (133. Styling Active Router Links)
Well,
2:15
S… Speaker 1 (133. Styling Active Router Links)
the router link active directive does one thing.
2:19
S… Speaker 1 (133. Styling Active Router Links)
It analyzes your currently loaded path and then checks
2:23
S… Speaker 1 (133. Styling Active Router Links)
which links lead to a route which uses this path.
2:26
S… Speaker 1 (133. Styling Active Router Links)
And by default,
2:28
S… Speaker 1 (133. Styling Active Router Links)
it marks an element as active.
2:30
S… Speaker 1 (133. Styling Active Router Links)
It adds this CSS class if it contains the
2:34
S… Speaker 1 (133. Styling Active Router Links)
path you are on or if this link is part
2:39
S… Speaker 1 (133. Styling Active Router Links)
of the path which is currently loaded.
2:40
S… Speaker 1 (133. Styling Active Router Links)
So for the...
2:43
S… Speaker 1 (133. Styling Active Router Links)
slash servers link or the slash users link,
2:45
S… Speaker 1 (133. Styling Active Router Links)
this is of course the case once we click servers or users.
2:48
S… Speaker 1 (133. Styling Active Router Links)
For the slash nothing link,
2:51
S… Speaker 1 (133. Styling Active Router Links)
which is the first one,
2:52
S… Speaker 1 (133. Styling Active Router Links)
the homepage, this is always the case.
2:55
S… Speaker 1 (133. Styling Active Router Links)
We always have slash nothing at the beginning of our path here.
2:59
S… Speaker 1 (133. Styling Active Router Links)
So if we are on slash users,
3:01
S… Speaker 1 (133. Styling Active Router Links)
well,
3:02
S… Speaker 1 (133. Styling Active Router Links)
there is this empty path in between,
3:04
S… Speaker 1 (133. Styling Active Router Links)
you could say.
3:05
S… Speaker 1 (133. Styling Active Router Links)
The same for servers and the same for just home,
3:07
S… Speaker 1 (133. Styling Active Router Links)
of course.
3:08
S… Speaker 1 (133. Styling Active Router Links)
So the empty path segment is part of all
3:12
S… Speaker 2 (133. Styling Active Router Links)
paths.
3:13
S… Speaker 1 (133. Styling Active Router Links)
Still,
3:14
S… Speaker 1 (133. Styling Active Router Links)
we don't want to have home being marked as active all the time.
3:18
S… Speaker 1 (133. Styling Active Router Links)
So to fix this,
3:20
S… Speaker 1 (133. Styling Active Router Links)
we can add some configuration to this router link active directive,
3:24
S… Speaker 1 (133. Styling Active Router Links)
and I will just split this up all over multiple lines to make this
3:28
S… Speaker 1 (133. Styling Active Router Links)
a bit easier to read.
3:30
S… Speaker 1 (133. Styling Active Router Links)
So we can add a special configuration to our router link
3:34
S… Speaker 1 (133. Styling Active Router Links)
active directive.
3:35
S… Speaker 1 (133. Styling Active Router Links)
So on the same element as router link active was added to,
3:39
S… Speaker 1 (133. Styling Active Router Links)
we can add router link active.
3:44
S… Speaker 1 (133. Styling Active Router Links)
And this now needs some property binding because we don't just
3:48
S… Speaker 1 (133. Styling Active Router Links)
pass a string there.
3:49
S… Speaker 1 (133. Styling Active Router Links)
Instead,
3:50
S… Speaker 1 (133. Styling Active Router Links)
we pass a JavaScript object and that would not work without having our
3:55
S… Speaker 1 (133. Styling Active Router Links)
square brackets.
3:56
S… Speaker 1 (133. Styling Active Router Links)
So with square brackets,
3:57
S… Speaker 1 (133. Styling Active Router Links)
we can pass anything which will be resolved dynamically like this JavaScript object.
4:02
S… Speaker 1 (133. Styling Active Router Links)
And here we can basically add one important configuration,
4:06
S… Speaker 1 (133. Styling Active Router Links)
say exact.
4:09
S… Speaker 1 (133. Styling Active Router Links)
And set this to true.
4:11
S… Speaker 1 (133. Styling Active Router Links)
So exact is a kind of a reserved property.
4:14
S… Speaker 1 (133. Styling Active Router Links)
On this object,
4:15
S… Speaker 1 (133. Styling Active Router Links)
you pass to router link active options.
4:17
S… Speaker 1 (133. Styling Active Router Links)
And this will now basically tell Angular only at this
4:22
S… Speaker 1 (133. Styling Active Router Links)
router link active class,
4:23
S… Speaker 1 (133. Styling Active Router Links)
so this active CSS class in this case,
4:25
S… Speaker 1 (133. Styling Active Router Links)
if the exact,
4:27
S… Speaker 2 (133. Styling Active Router Links)
the full path is...
4:30
S… Speaker 1 (133. Styling Active Router Links)
Well, whatever this link leads to.
4:32
S… Speaker 1 (133. Styling Active Router Links)
So only if everything is just slash and not if it is only part
4:36
S… Speaker 2 (133. Styling Active Router Links)
of the path.
4:36
S… Speaker 1 (133. Styling Active Router Links)
So with this in place,
4:38
S… Speaker 1 (133. Styling Active Router Links)
now you see it still is marked as active on the empty path at the starting
4:43
S… Speaker 1 (133. Styling Active Router Links)
page.
4:43
S… Speaker 1 (133. Styling Active Router Links)
But if you go to slash servers,
4:45
S… Speaker 1 (133. Styling Active Router Links)
now only servers is marked as active because now we fixed
4:49
S… Speaker 1 (133. Styling Active Router Links)
this, we changed the default behavior to make sure we only
4:53
S… Speaker 1 (133. Styling Active Router Links)
mark this if the full path is,
4:56
S… Speaker 1 (133. Styling Active Router Links)
well, whatever we have on our router link.

Transkript sa a te kreye pa AI (automatic speech recognition). Li ka gen erè — tcheke ak son orijinal la pou itilize kritik. Politik AI

❤️ Love STT.ai? Di zanmi ou yo!
Resume
Klike sou Remak pou kreye yon remak AI de transkript sa a.
Enstale...
Konbyen tan pou m' fè transkript la?
Mande nenpòt bagay sou transkript sa a - AI a pral jwenn seksyon ki enpòtan yo epi reponn.
Transkripte yon lòt