138. Fetching Route Parameters Reactively

Jul 15, 2026 05:34 · 7:25 · English · Whisper Turbo · 1 वक्ता

यो प्रतिलिपि आज म्याद समाप्त हुन्छ । स्थायी भण्डारणका लागि स्तरबृद्धि गर्नुहोस् →

पढाइ अनुक्रमणिका

0:02

S… Speaker 1 (138. Fetching Route Parameters Reactively)

In the last lecture,

0:03

S… Speaker 1 (138. Fetching Route Parameters Reactively)

we saw how we can retrieve our route parameters,

0:05

S… Speaker 1 (138. Fetching Route Parameters Reactively)

and it was working fine,

0:06

S… Speaker 1 (138. Fetching Route Parameters Reactively)

but there are ways to break this.

0:09

S… Speaker 1 (138. Fetching Route Parameters Reactively)

There are cases where this approach will not work,

0:12

S… Speaker 1 (138. Fetching Route Parameters Reactively)

and I will show you a typical example.

0:15

S… Speaker 1 (138. Fetching Route Parameters Reactively)

On our users component,

0:17

S… Speaker 1 (138. Fetching Route Parameters Reactively)

we right now always saw that we have the user ID

0:21

S… Speaker 1 (138. Fetching Route Parameters Reactively)

and name we passed on our URL.

0:24

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Now in here,

0:26

S… Speaker 1 (138. Fetching Route Parameters Reactively)

let me quickly add a router link.

0:29

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So I'll add a horizontal line and then add an

0:33

S… Speaker 1 (138. Fetching Route Parameters Reactively)

anchor tag where I remove the ref and instead say router link.

0:38

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And now I will actually use this syntax with

0:42

S… Speaker 1 (138. Fetching Route Parameters Reactively)

the squared brackets where I pass an array.

0:47

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And I want to load slash users.

0:51

S… Speaker 1 (138. Fetching Route Parameters Reactively)

an absolute path to load the correct route.

0:53

S… Speaker 1 (138. Fetching Route Parameters Reactively)

The second element will be the ID.

0:55

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So this might be,

0:57

S… Speaker 1 (138. Fetching Route Parameters Reactively)

let's say 10,

0:57

S… Speaker 1 (138. Fetching Route Parameters Reactively)

could be a number,

0:58

S… Speaker 1 (138. Fetching Route Parameters Reactively)

could be a string.

0:59

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And then the name,

1:01

S… Speaker 1 (138. Fetching Route Parameters Reactively)

let's say Anna.

1:02

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So this will now construct a route,

1:05

S… Speaker 1 (138. Fetching Route Parameters Reactively)

which is slash users slash 10 slash Anna.

1:09

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And this is where this array approach might be better because you can really

1:13

S… Speaker 1 (138. Fetching Route Parameters Reactively)

structure this really well.

1:14

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And we will soon see how you can even make this more dynamic.

1:18

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So here,

1:20

S… Speaker 1 (138. Fetching Route Parameters Reactively)

I will say load Anna,

1:22

S… Speaker 1 (138. Fetching Route Parameters Reactively)

ID 10,

1:24

S… Speaker 1 (138. Fetching Route Parameters Reactively)

something like that,

1:25

S… Speaker 1 (138. Fetching Route Parameters Reactively)

any text you like.

1:26

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And now let's see this here.

1:28

S… Speaker 1 (138. Fetching Route Parameters Reactively)

We got this link on our currently loaded page with users free max.

1:32

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And if I click this,

1:34

S… Speaker 1 (138. Fetching Route Parameters Reactively)

you see that the URL was updated.

1:36

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Now it's users 10 Anna,

1:37

S… Speaker 1 (138. Fetching Route Parameters Reactively)

but the text here wasn't.

1:40

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And this is not a bug.

1:42

S… Speaker 1 (138. Fetching Route Parameters Reactively)

This is the default behavior.

1:44

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And what is happening here?

1:45

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Do you have an idea?

1:48

S… Speaker 1 (138. Fetching Route Parameters Reactively)

The behavior here,

1:49

S… Speaker 1 (138. Fetching Route Parameters Reactively)

as I just mentioned,

1:50

S… Speaker 1 (138. Fetching Route Parameters Reactively)

is not a bug.

1:51

S… Speaker 1 (138. Fetching Route Parameters Reactively)

We load our data by using this snapshot

1:55

S… Speaker 1 (138. Fetching Route Parameters Reactively)

object on the route.

1:57

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Now,

1:58

S… Speaker 1 (138. Fetching Route Parameters Reactively)

if we load a new route,

2:00

S… Speaker 1 (138. Fetching Route Parameters Reactively)

what happens?

2:00

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Angular has a look at our app module,

2:03

S… Speaker 1 (138. Fetching Route Parameters Reactively)

finds the fitting route here,

2:06

S… Speaker 1 (138. Fetching Route Parameters Reactively)

hopefully, loads the component,

2:08

S… Speaker 1 (138. Fetching Route Parameters Reactively)

initializes the component,

2:10

S… Speaker 1 (138. Fetching Route Parameters Reactively)

and gives us the data by accessing the snapshot here.

2:14

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Now that only happens if we haven't been on this component before.

2:18

S… Speaker 1 (138. Fetching Route Parameters Reactively)

But if we click this link,

2:20

S… Speaker 1 (138. Fetching Route Parameters Reactively)

which is on the user component,

2:22

S… Speaker 1 (138. Fetching Route Parameters Reactively)

well then the URL still changes,

2:26

S… Speaker 1 (138. Fetching Route Parameters Reactively)

but we already are on the component which should get loaded.

2:28

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So Angular,

2:30

S… Speaker 1 (138. Fetching Route Parameters Reactively)

cleverly,

2:31

S… Speaker 1 (138. Fetching Route Parameters Reactively)

doesn't reinstantiate this component.

2:34

S… Speaker 1 (138. Fetching Route Parameters Reactively)

That would only cost us performance.

2:36

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Why would it re -render a component we already are on?

2:41

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Now you might say,

2:42

S… Speaker 1 (138. Fetching Route Parameters Reactively)

because the data we want to load changed.

2:44

S… Speaker 1 (138. Fetching Route Parameters Reactively)

But Angular doesn't know.

2:46

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And it's good that by default,

2:48

S… Speaker 1 (138. Fetching Route Parameters Reactively)

it won't recreate the whole component and destroy the old one

2:52

S… Speaker 1 (138. Fetching Route Parameters Reactively)

if we already are on that component.

2:54

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Still,

2:55

S… Speaker 1 (138. Fetching Route Parameters Reactively)

of course, you want to get access to the updated data.

2:58

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And you can.

2:59

S… Speaker 1 (138. Fetching Route Parameters Reactively)

It's fine to use the snapshot for the first

3:03

S… Speaker 1 (138. Fetching Route Parameters Reactively)

initialization.

3:04

S… Speaker 1 (138. Fetching Route Parameters Reactively)

But to be able to react to subsequent changes,

3:08

S… Speaker 1 (138. Fetching Route Parameters Reactively)

we need a different approach.

3:10

S… Speaker 1 (138. Fetching Route Parameters Reactively)

In our TypeScript code and ngOnInit here,

3:13

S… Speaker 1 (138. Fetching Route Parameters Reactively)

let's say after we assigned this initial setup,

3:15

S… Speaker 1 (138. Fetching Route Parameters Reactively)

we can use our route object.

3:18

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And instead of using the snapshot here,

3:20

S… Speaker 1 (138. Fetching Route Parameters Reactively)

there is some params property on this route object

3:24

S… Speaker 1 (138. Fetching Route Parameters Reactively)

itself.

3:24

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Now,

3:25

S… Speaker 1 (138. Fetching Route Parameters Reactively)

we didn't use that before.

3:26

S… Speaker 1 (138. Fetching Route Parameters Reactively)

We had the snapshot in between.

3:28

S… Speaker 1 (138. Fetching Route Parameters Reactively)

What's the difference?

3:31

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Params here is an observable.

3:34

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And now observables is something I will come to you right after this

3:38

S… Speaker 1 (138. Fetching Route Parameters Reactively)

section where we will take a closer look.

3:40

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Basically,

3:41

S… Speaker 1 (138. Fetching Route Parameters Reactively)

observables are a feature added by some other

3:45

S… Speaker 1 (138. Fetching Route Parameters Reactively)

third -party package,

3:46

S… Speaker 1 (138. Fetching Route Parameters Reactively)

not by Angular,

3:47

S… Speaker 1 (138. Fetching Route Parameters Reactively)

but heavily used by Angular,

3:49

S… Speaker 1 (138. Fetching Route Parameters Reactively)

which allow you to easily work with asynchronous tasks.

3:54

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And this is an asynchronous task,

3:56

S… Speaker 1 (138. Fetching Route Parameters Reactively)

because the parameters of your currently loaded route might change

4:00

S… Speaker 1 (138. Fetching Route Parameters Reactively)

at some point in the future if the user clicks this link,

4:03

S… Speaker 1 (138. Fetching Route Parameters Reactively)

but you don't know when,

4:05

S… Speaker 1 (138. Fetching Route Parameters Reactively)

you don't know if and you don't know how long it will take.

4:08

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So therefore,

4:09

S… Speaker 1 (138. Fetching Route Parameters Reactively)

you can't block your code and wait for this to happen here

4:13

S… Speaker 1 (138. Fetching Route Parameters Reactively)

because it might never happen.

4:14

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So an observable is an easy way to subscribe to

4:19

S… Speaker 1 (138. Fetching Route Parameters Reactively)

some event which might happen in the future to then

4:23

S… Speaker 1 (138. Fetching Route Parameters Reactively)

execute some code when it happens without having to wait for it now.

4:27

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And that is what params is.

4:29

S… Speaker 1 (138. Fetching Route Parameters Reactively)

It is such an observable and as the name implies,

4:31

S… Speaker 1 (138. Fetching Route Parameters Reactively)

we can observe it and we do so by subscribing to it.

4:35

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So you can call the subscribe method on it,

4:38

S… Speaker 1 (138. Fetching Route Parameters Reactively)

and this is still called on params.

4:40

S… Speaker 1 (138. Fetching Route Parameters Reactively)

I'm just bringing it in a new line to make it easier to read.

4:44

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And now subscribe can take three functions

4:48

S… Speaker 1 (138. Fetching Route Parameters Reactively)

you pass here as arguments.

4:50

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Now,

4:51

S… Speaker 1 (138. Fetching Route Parameters Reactively)

the first one is the most important one here.

4:54

S… Speaker 1 (138. Fetching Route Parameters Reactively)

It will be fired whenever...

4:57

S… Speaker 1 (138. Fetching Route Parameters Reactively)

new data is sent through that observable.

5:00

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So to put it in easier words,

5:02

S… Speaker 1 (138. Fetching Route Parameters Reactively)

whenever the parameters change in this use case.

5:05

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So then this first argument,

5:07

S… Speaker 1 (138. Fetching Route Parameters Reactively)

which should be a function here,

5:08

S… Speaker 1 (138. Fetching Route Parameters Reactively)

is executed.

5:09

S… Speaker 1 (138. Fetching Route Parameters Reactively)

I will use a ES6 arrow function.

5:12

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And here we will get the updated params as

5:16

S… Speaker 1 (138. Fetching Route Parameters Reactively)

an argument.

5:16

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And you can set this of type params.

5:19

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Doesn't really make a difference.

5:21

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Has to be imported from at AngularRouter then though.

5:24

S… Speaker 1 (138. Fetching Route Parameters Reactively)

But anyways, params will always be an object just like here on the snapshot,

5:28

S… Speaker 1 (138. Fetching Route Parameters Reactively)

which holds the parameters you defined in the route as

5:32

S… Speaker 1 (138. Fetching Route Parameters Reactively)

properties.

5:32

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So in the function body of this arrow function,

5:36

S… Speaker 1 (138. Fetching Route Parameters Reactively)

so of this function which gets executed whenever the parameter changes,

5:40

S… Speaker 1 (138. Fetching Route Parameters Reactively)

here we can now update our user object.

5:44

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And we can say this user ID should now be params ID,

5:48

S… Speaker 1 (138. Fetching Route Parameters Reactively)

referring to the params we passed here.

5:50

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And the same,

5:51

S… Speaker 1 (138. Fetching Route Parameters Reactively)

of course,

5:52

S… Speaker 1 (138. Fetching Route Parameters Reactively)

for the name.

5:55

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Oops, with a semicolon at the end,

5:57

S… Speaker 1 (138. Fetching Route Parameters Reactively)

of course.

5:57

S… Speaker 1 (138. Fetching Route Parameters Reactively)

So this will now update our user object whenever the parameters

6:01

S… Speaker 1 (138. Fetching Route Parameters Reactively)

change.

6:02

S… Speaker 1 (138. Fetching Route Parameters Reactively)

That's why it's inside of this callback and of this anonymous function

6:06

S… Speaker 1 (138. Fetching Route Parameters Reactively)

passed to the subscribe method here.

6:08

S… Speaker 1 (138. Fetching Route Parameters Reactively)

This code will not be executed when ngOnInit runs through.

6:11

S… Speaker 1 (138. Fetching Route Parameters Reactively)

This code here will,

6:13

S… Speaker 1 (138. Fetching Route Parameters Reactively)

so this subscription will be set up,

6:15

S… Speaker 1 (138. Fetching Route Parameters Reactively)

but only if the parameters then change,

6:17

S… Speaker 1 (138. Fetching Route Parameters Reactively)

only in this case,

6:18

S… Speaker 1 (138. Fetching Route Parameters Reactively)

we will exchange them in our user object.

6:21

S… Speaker 1 (138. Fetching Route Parameters Reactively)

That is why with this change in place,

6:23

S… Speaker 1 (138. Fetching Route Parameters Reactively)

if we now go back to free and max,

6:27

S… Speaker 1 (138. Fetching Route Parameters Reactively)

we see free and max is displayed here.

6:30

S… Speaker 1 (138. Fetching Route Parameters Reactively)

But if I now click this link,

6:32

S… Speaker 1 (138. Fetching Route Parameters Reactively)

it correctly updates here too because our observable fires and

6:36

S… Speaker 1 (138. Fetching Route Parameters Reactively)

we then retrieve the updated parameters and assign them to

6:40

S… Speaker 1 (138. Fetching Route Parameters Reactively)

our user object.

6:41

S… Speaker 1 (138. Fetching Route Parameters Reactively)

And this therefore actually is the approach you should take

6:45

S… Speaker 1 (138. Fetching Route Parameters Reactively)

to be really safe against changes not being reflected

6:49

S… Speaker 1 (138. Fetching Route Parameters Reactively)

in your template.

6:51

S… Speaker 1 (138. Fetching Route Parameters Reactively)

Now, if you know that the component you're on may never be

6:55

S… Speaker 1 (138. Fetching Route Parameters Reactively)

reloaded from within that component as we're doing it here,

6:58

S… Speaker 1 (138. Fetching Route Parameters Reactively)

then you might not need this addition.

7:00

S… Speaker 1 (138. Fetching Route Parameters Reactively)

You might simply use the snapshot because if you know your component will

7:05

S… Speaker 1 (138. Fetching Route Parameters Reactively)

100 % of the time be recreated when it is reached because there's no other

7:09

S… Speaker 1 (138. Fetching Route Parameters Reactively)

way of reaching it.

7:10

S… Speaker 1 (138. Fetching Route Parameters Reactively)

There is no way of reaching it whilst being on that component.

7:12

S… Speaker 1 (138. Fetching Route Parameters Reactively)

If you know that,

7:14

S… Speaker 1 (138. Fetching Route Parameters Reactively)

you don't need to subscribe.

7:15

S… Speaker 1 (138. Fetching Route Parameters Reactively)

In all other cases,

7:17

S… Speaker 1 (138. Fetching Route Parameters Reactively)

make sure to use this approach.

7:19

S… Speaker 1 (138. Fetching Route Parameters Reactively)

to get informed about any changes in your route parameters.

यो प्रतिलिपि AI (स्वचालित वक्तव्य पहिचान) द्वारा उत्पन्न गरिएको थियो । त्रुटि समावेश गर्न सक्छ - महत्वपूर्ण प्रयोगका लागि मौलिक अडियोसँग रुजु गर्नुहोस् । AI नीति

❤️ प्रेम STT.ai? आफ्नो साथीहरूलाई भन्नुहोस्!

सारांश

यो लिखितको AI सारांश उत्पन्न गर्न सारांश गर्नुहोस् क्लिक गर्नुहोस् ।

यो प्रतिलिपि बारे AI सोध्नुहोस्

यो transcript बारेमा केही सोध्नुहोस् - एआई सम्बन्धित खण्डहरू र जवाफ पाउनुहुनेछ.

अर्को प्रतिलिपि गर्नुहोस्