136. Passing Parameters to Routes

Jul 15, 2026 05:33 · 3:10 · English · Whisper Turbo · 2 Mga Speaker

Ang transcript na ito ay magtatapos ngayon. Upgrade para sa permanenteng imbakan →

Talaan ng mga lektura

0:02

S… Speaker 1 (136. Passing Parameters to Routes)

With the basics about routing set,

0:04

S… Speaker 1 (136. Passing Parameters to Routes)

let's enhance our application a bit by going back to the app module and

0:08

S… Speaker 1 (136. Passing Parameters to Routes)

adding some other routes to it.

0:10

S… Speaker 1 (136. Passing Parameters to Routes)

Let's say that besides our users route here,

0:14

S… Speaker 1 (136. Passing Parameters to Routes)

we also want to be able to load a single user,

0:17

S… Speaker 1 (136. Passing Parameters to Routes)

so to load the user component,

0:19

S… Speaker 1 (136. Passing Parameters to Routes)

which simply,

0:21

S… Speaker 1 (136. Passing Parameters to Routes)

well, gives us that single user.

0:24

S… Speaker 2 (136. Passing Parameters to Routes)

For that,

0:25

S… Speaker 1 (136. Passing Parameters to Routes)

we might want to load a user dynamically because if we have a look at our users component,

0:29

S… Speaker 1 (136. Passing Parameters to Routes)

we see we get three users with different IDs.

0:31

S… Speaker 1 (136. Passing Parameters to Routes)

So it would be nice if we could pass the ID of the user

0:36

S… Speaker 1 (136. Passing Parameters to Routes)

we want to load in that route path.

0:38

S… Speaker 1 (136. Passing Parameters to Routes)

One approach would be to set up a route with user one and

0:43

S… Speaker 1 (136. Passing Parameters to Routes)

then one with user two.

0:45

S… Speaker 1 (136. Passing Parameters to Routes)

and doesn't look very optimal because it's not very dynamic and still,

0:49

S… Speaker 1 (136. Passing Parameters to Routes)

how would we know inside of this component which route was loaded?

0:53

S… Speaker 1 (136. Passing Parameters to Routes)

Okay, we could parse the path manually,

0:56

S… Speaker 1 (136. Passing Parameters to Routes)

but that's not really a great approach.

0:58

S… Speaker 1 (136. Passing Parameters to Routes)

Instead,

0:59

S… Speaker 1 (136. Passing Parameters to Routes)

we can add parameters to our routes,

1:01

S… Speaker 1 (136. Passing Parameters to Routes)

dynamic segments in our paths.

1:04

S… Speaker 1 (136. Passing Parameters to Routes)

We do this by adding a colon and then any name

1:08

S… Speaker 1 (136. Passing Parameters to Routes)

you like, like for example,

1:09

S… Speaker 1 (136. Passing Parameters to Routes)

ID.

1:10

S… Speaker 1 (136. Passing Parameters to Routes)

You will later be able to retrieve the parameter inside of the loaded component

1:14

S… Speaker 1 (136. Passing Parameters to Routes)

by that name you specify here,

1:16

S… Speaker 1 (136. Passing Parameters to Routes)

so by ID in this case.

1:18

S… Speaker 1 (136. Passing Parameters to Routes)

And the colon simply tells Angular that this is a dynamic part

1:22

S… Speaker 2 (136. Passing Parameters to Routes)

of the path.

1:23

S… Speaker 1 (136. Passing Parameters to Routes)

Without colon,

1:24

S… Speaker 1 (136. Passing Parameters to Routes)

only routes which are user slash ID,

1:28

S… Speaker 1 (136. Passing Parameters to Routes)

and with ID I literally mean the word ID,

1:31

S… Speaker 1 (136. Passing Parameters to Routes)

would lead to this component.

1:33

S… Speaker 1 (136. Passing Parameters to Routes)

With a colon,

1:34

S… Speaker 1 (136. Passing Parameters to Routes)

user slash ID.

1:36

S… Speaker 1 (136. Passing Parameters to Routes)

Anything else would load this component and anything else would be interpreted

1:40

S… Speaker 1 (136. Passing Parameters to Routes)

as the ID.

1:42

S… Speaker 1 (136. Passing Parameters to Routes)

Now with this in place,

1:44

S… Speaker 1 (136. Passing Parameters to Routes)

we are able to load a component,

1:48

S… Speaker 1 (136. Passing Parameters to Routes)

the user component,

1:49

S… Speaker 1 (136. Passing Parameters to Routes)

with this dynamic piece sent to it.

1:53

S… Speaker 1 (136. Passing Parameters to Routes)

So if we have a look to this user component or at this user component,

1:57

S… Speaker 1 (136. Passing Parameters to Routes)

here we simply say user with ID and now we simply have a dummy text

2:01

S… Speaker 1 (136. Passing Parameters to Routes)

here loaded and user name with some dummy text here.

2:05

S… Speaker 1 (136. Passing Parameters to Routes)

Now for now,

2:06

S… Speaker 1 (136. Passing Parameters to Routes)

we won't touch this.

2:07

S… Speaker 1 (136. Passing Parameters to Routes)

We won't use this parameter.

2:09

S… Speaker 1 (136. Passing Parameters to Routes)

We will do this in the next lecture.

2:11

S… Speaker 1 (136. Passing Parameters to Routes)

Let's now see if we successfully reach this.

2:14

S… Speaker 1 (136. Passing Parameters to Routes)

So if we save this to let it recompile and we go back,

2:17

S… Speaker 1 (136. Passing Parameters to Routes)

we are in users.

2:19

S… Speaker 1 (136. Passing Parameters to Routes)

Let's add slash something here.

2:23

S… Speaker 1 (136. Passing Parameters to Routes)

And you see the single user component was loaded.

2:26

S… Speaker 1 (136. Passing Parameters to Routes)

The same if we add slash one here.

2:29

S… Speaker 1 (136. Passing Parameters to Routes)

So this thing,

2:31

S… Speaker 1 (136. Passing Parameters to Routes)

the segment after slash users is indeed interpreted

2:36

S… Speaker 1 (136. Passing Parameters to Routes)

as dynamic.

2:37

S… Speaker 2 (136. Passing Parameters to Routes)

Otherwise,

2:38

S… Speaker 1 (136. Passing Parameters to Routes)

we would get the error that users slash one is

2:42

S… Speaker 1 (136. Passing Parameters to Routes)

an unknown route.

2:43

S… Speaker 1 (136. Passing Parameters to Routes)

It isn't because we set it up to be a known one because again,

2:47

S… Speaker 1 (136. Passing Parameters to Routes)

we added this dynamic path segment here.

2:50

S… Speaker 1 (136. Passing Parameters to Routes)

Now this is how we can dynamically load some

2:54

S… Speaker 1 (136. Passing Parameters to Routes)

route, how we can encode some data into our path.

2:58

S… Speaker 1 (136. Passing Parameters to Routes)

How can we get access to this data in the loaded component

3:02

S… Speaker 1 (136. Passing Parameters to Routes)

though?

3:02

S… Speaker 1 (136. Passing Parameters to Routes)

Because that of course is another key question.

3:05

S… Speaker 1 (136. Passing Parameters to Routes)

Let's take a closer look in the next lecture.

Ang transcript na ito ay ginawa ng AI (automatic speech recognition). Maaaring may mga pagkakamali — suriin ang orihinal na audio para sa kritikal na paggamit. Patakaran ng AI

❤️ Pag-ibig STT.ai? Sabihin sa iyong mga kaibigan!

Buod

I-click ang Summarize upang makabuo ng isang AI buod ng transcript na ito.

Magtanong sa AI Tungkol sa Transcript na Ito

Magtanong ng anumang bagay tungkol sa transcript na ito - ang AI ay makahanap ng mga kaugnay na mga seksyon at sagot.

Isalin ang isa pang