138. Fetching Route Parameters Reactively

Jul 15, 2026 05:34 · 7:25 · English · Whisper Turbo · 1 Locutores
Haec pagina de translatio explicat. Despectus in Viam Permanentem →
Index communium praefecturae Leptis Magnae
Videtur solum
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.

Haec transcriptio a AI (recognitione automatica loci) generata est. Errores continere potest - contra audio originalem verificare ut criticum utentur. Politicae

❤️ STT.ai amoris?
Summa
Haec pagina de scriptura explicat, quae ad scripturam translativam pertinet.
Summa...
De hoc translatio scripsit.
Quod ad hoc adscriptum est, quod ad hoc adscriptum est, et adscriptum est.
Translatio