133. Styling Active Router Links

Jul 15, 2026 05:30 · 5:01 · English · Whisper Turbo · 2 Speakers

Această transcriere expiră astăzi. Actualizarea pentru stocarea permanentă →

Indice de lecție

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.

Această transcriere a fost generată de AI (reconociune automată de vorbire). Poate conține erori — verificați împotriva audio-ului original pentru utilizare critică. Politica de asociere a aerului intern

❤️ Îți place STT.ai? Spune-le prietenilor tăi!

Rezumatul

Faceți clic pe Summarize pentru a genera un rezumat al IA a acestei transcripții.

Întreabă Al despre acest text

Întreabă orice despre această transcriere — IA va găsi secțiuni relevante și răspunsul.

Transcrie Altul