137. Fetching Route Parameters

Jul 15, 2026 05:33 · 4:01 · English · Whisper Turbo · 1 Speakers

Henda útgávan er útgivin í dag. Uppgradering til permanent lagring →

Lærarabókin

0:02

S… Speaker 1 (137. Fetching Route Parameters)

In the last lecture,

0:03

S… Speaker 1 (137. Fetching Route Parameters)

we created our route with a dynamic path segment.

0:06

S… Speaker 1 (137. Fetching Route Parameters)

Now we want to get access to the data the user sent us,

0:10

S… Speaker 1 (137. Fetching Route Parameters)

or which is encoded in the URL,

0:12

S… Speaker 1 (137. Fetching Route Parameters)

I should say.

0:13

S… Speaker 1 (137. Fetching Route Parameters)

So we know that we will load the user component,

0:16

S… Speaker 1 (137. Fetching Route Parameters)

user component,

0:17

S… Speaker 1 (137. Fetching Route Parameters)

this one here,

0:17

S… Speaker 1 (137. Fetching Route Parameters)

and we know that there will be some data in the URL for us.

0:21

S… Speaker 1 (137. Fetching Route Parameters)

How can we get access to it?

0:24

S… Speaker 1 (137. Fetching Route Parameters)

Well, it is in the TypeScript file where we can get access.

0:27

S… Speaker 1 (137. Fetching Route Parameters)

And there,

0:28

S… Speaker 1 (137. Fetching Route Parameters)

we need to inject something we already injected before.

0:30

S… Speaker 1 (137. Fetching Route Parameters)

The active route.

0:33

S… Speaker 1 (137. Fetching Route Parameters)

So this is again on activated route.

0:35

S… Speaker 1 (137. Fetching Route Parameters)

So make sure to use this type and import it from at Angular Router.

0:39

S… Speaker 1 (137. Fetching Route Parameters)

And by injecting this,

0:41

S… Speaker 1 (137. Fetching Route Parameters)

we get access to the currently loaded route.

0:43

S… Speaker 1 (137. Fetching Route Parameters)

Now I told you that this currently loaded route is a JavaScript

0:47

S… Speaker 1 (137. Fetching Route Parameters)

object with a lot of metadata about this currently loaded route.

0:51

S… Speaker 1 (137. Fetching Route Parameters)

One of the important pieces of information is the currently active user.

0:56

S… Speaker 1 (137. Fetching Route Parameters)

Now you'll see that in this user component,

0:58

S… Speaker 1 (137. Fetching Route Parameters)

I already defined a user object at the top,

1:01

S… Speaker 1 (137. Fetching Route Parameters)

which is undefined for now.

1:02

S… Speaker 1 (137. Fetching Route Parameters)

It should have the following structure and it's not used right now.

1:07

S… Speaker 1 (137. Fetching Route Parameters)

But we could load our user by simply,

1:10

S… Speaker 1 (137. Fetching Route Parameters)

well,

1:11

S… Speaker 1 (137. Fetching Route Parameters)

getting access or retrieving this parameter from our

1:16

S… Speaker 1 (137. Fetching Route Parameters)

URL.

1:17

S… Speaker 1 (137. Fetching Route Parameters)

So it would be nice if,

1:18

S… Speaker 1 (137. Fetching Route Parameters)

let's say, in ngOnInit,

1:19

S… Speaker 1 (137. Fetching Route Parameters)

when our component gets initialized,

1:22

S… Speaker 1 (137. Fetching Route Parameters)

we get our user.

1:24

S… Speaker 1 (137. Fetching Route Parameters)

So we maybe want to say this user equals,

1:29

S… Speaker 1 (137. Fetching Route Parameters)

and now we assign it to a JavaScript object because

1:33

S… Speaker 1 (137. Fetching Route Parameters)

that is the type of it,

1:35

S… Speaker 1 (137. Fetching Route Parameters)

a JavaScript object with an ID and with a name.

1:39

S… Speaker 1 (137. Fetching Route Parameters)

Now the value for the ID can be fetched from our route,

1:43

S… Speaker 1 (137. Fetching Route Parameters)

and there we have a snapshot property,

1:46

S… Speaker 1 (137. Fetching Route Parameters)

and on this snapshot of our currently active route,

1:49

S… Speaker 1 (137. Fetching Route Parameters)

we have a params JavaScript object,

1:53

S… Speaker 1 (137. Fetching Route Parameters)

and here we can get our ID.

1:56

S… Speaker 1 (137. Fetching Route Parameters)

And now you will only have access to properties here,

2:00

S… Speaker 1 (137. Fetching Route Parameters)

well,

2:00

S… Speaker 1 (137. Fetching Route Parameters)

which you defined in your route parameters.

2:03

S… Speaker 1 (137. Fetching Route Parameters)

So this

2:06

S… Speaker 1 (137. Fetching Route Parameters)

Part here we named it ID here so we can retrieve

2:10

S… Speaker 1 (137. Fetching Route Parameters)

the ID from this params object here Now the

2:14

S… Speaker 1 (137. Fetching Route Parameters)

name is something which is not encoded in the route right now.

2:18

S… Speaker 1 (137. Fetching Route Parameters)

So maybe we should do this too.

2:19

S… Speaker 1 (137. Fetching Route Parameters)

Let's go to app module and Let's simply add another

2:23

S… Speaker 1 (137. Fetching Route Parameters)

dynamic part here dot a colon name Now

2:28

S… Speaker 1 (137. Fetching Route Parameters)

we also will get this as a parameter so we can retrieve it

2:32

S… Speaker 1 (137. Fetching Route Parameters)

the same way we retrieve the ID

2:35

S… Speaker 1 (137. Fetching Route Parameters)

Let's retrieve the name.

2:36

S… Speaker 1 (137. Fetching Route Parameters)

And it's in the same params object because this is all part of the route

2:40

S… Speaker 1 (137. Fetching Route Parameters)

which was loaded due to this path we set up in app module being

2:44

S… Speaker 1 (137. Fetching Route Parameters)

triggered, which holds two dynamic pieces.

2:48

S… Speaker 1 (137. Fetching Route Parameters)

And you can add as many parameters here as you want.

2:51

S… Speaker 1 (137. Fetching Route Parameters)

They will all be retrievable on this params object of the loaded route.

2:55

S… Speaker 1 (137. Fetching Route Parameters)

With that,

2:56

S… Speaker 1 (137. Fetching Route Parameters)

we assign something to our user.

2:58

S… Speaker 1 (137. Fetching Route Parameters)

Now we could go to our HTML document and output that

3:02

S… Speaker 1 (137. Fetching Route Parameters)

data.

3:03

S… Speaker 1 (137. Fetching Route Parameters)

So with string interpolation,

3:04

S… Speaker 1 (137. Fetching Route Parameters)

here we could output user ID.

3:06

S… Speaker 1 (137. Fetching Route Parameters)

It will now be set,

3:08

S… Speaker 1 (137. Fetching Route Parameters)

we know that.

3:09

S… Speaker 1 (137. Fetching Route Parameters)

And user name maybe.

3:11

S… Speaker 1 (137. Fetching Route Parameters)

Both will be available because we set it in NG on init.

3:14

S… Speaker 1 (137. Fetching Route Parameters)

Now this should work,

3:17

S… Speaker 1 (137. Fetching Route Parameters)

so if we save this.

3:19

S… Speaker 1 (137. Fetching Route Parameters)

and we target slash users one,

3:22

S… Speaker 1 (137. Fetching Route Parameters)

max maybe,

3:24

S… Speaker 1 (137. Fetching Route Parameters)

so that we have both the ID and the name,

3:26

S… Speaker 1 (137. Fetching Route Parameters)

and we hit enter.

3:28

S… Speaker 1 (137. Fetching Route Parameters)

We correctly see id1,

3:30

S… Speaker 1 (137. Fetching Route Parameters)

name max.

3:31

S… Speaker 1 (137. Fetching Route Parameters)

If we change the id to 3,

3:32

S… Speaker 1 (137. Fetching Route Parameters)

we see id3 here.

3:35

S… Speaker 1 (137. Fetching Route Parameters)

So this seems to work and you even see that

3:39

S… Speaker 1 (137. Fetching Route Parameters)

this is still marked as active because this currently active path

3:43

S… Speaker 1 (137. Fetching Route Parameters)

still contains slash users,

3:45

S… Speaker 1 (137. Fetching Route Parameters)

which was the route for this link.

3:47

S… Speaker 1 (137. Fetching Route Parameters)

So this router link active directive is still doing its job.

3:50

S… Speaker 1 (137. Fetching Route Parameters)

Now this seems to be working fine.

3:52

S… Speaker 1 (137. Fetching Route Parameters)

Now let me add something to it which will break it though.

3:57

S… Speaker 1 (137. Fetching Route Parameters)

I'll do this in the next lecture.

This transcript was generated by AI (automatic speech recognition). May contain errors - check against the original audio for critical use. Politikkur

❤️ Love STT.ai? Tell your friends!

Samandráttur

Click Summarize to generate an AI summary of this transcript.

Spørg AI um hetta transkriptión

Tað er ein spurningur um, hvussu nógvar ferðir ein kann skriva og lesa.

Transcribe otro