133. Styling Active Router Links

Jul 15, 2026 05:30 · 5:01 · English · Whisper Turbo · 2 ធុងបាស

អត្ថបទនេះផុតកំណត់នៅថ្ងៃនេះ & # 160; ។ ធ្វើឲ្យប្រសើរសម្រាប់ការផ្ទុកជានិច្ច →

លិបិក្រមការបង្រៀន

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.

អត្ថបទនេះត្រូវបានបង្កើតដោយ AI (ការទទួលស្គាល់ការនិយាយស្វ័យប្រវត្តិ) & # 160; ។ វាអាចមានកំហុស - ពិនិត្យមើលអូឌីយ៉ូដើមសម្រាប់ការប្រើសំខាន់ & # 160; ។ គោលការណ៍ AI

❤️ ស្រឡាញ់ STT.ai? ប្រាប់មិត្តភក្តិរបស់អ្នក!

សេចក្ដីសង្ខេប

ចុច សង្ខេប ដើម្បីបង្កើតសេចក្ដីសង្ខេប AI នៃការបកប្រែនេះ & # 160; ។

សំណួរ AI អំពីការបកប្រែនេះ

សំណួរអ្វីមួយអំពីការបកប្រែនេះ - AI នឹងរកឃើញផ្នែកដែលទាក់ទងនិងឆ្លើយតប។

បម្លែងជាសំឡេងផ្សេងទៀត

133. Styling Active Router Links

សេចក្ដី​សង្ខេប

សំណួរ AI អំពី​ការ​បកប្រែ​នេះ

សេចក្ដីសង្ខេប

សំណួរ AI អំពីការបកប្រែនេះ