In this lecture, we are going to look at a common problem with navigating to the same page with a different
route parameter.
We were able to successfully create a single route for multiple clips.
We can identify clips by the value of the route parameter in the URL at the bottom of the page.
We have links to other clips in a future lecture.
We will work on the logic for this section.
However, let's create some dummy links.
It's going to highlight a big problem with our component in your editor.
Open the component template file.
The list of videos can be found under a comment that says video list.
There are a total of three anchor elements.
We're going to focus our attention on the first anchor element of the fifth attribute to the router
linked DirecTV.
The URL will be the following value slash clip slash be.
Let's refresh the page in the browser.
At the moment, the path in my address bar points to clip a.
It doesn't matter what the URL is, as long as it's not pointing to clip B, let's click on the first
clip in the video list.
This should take us to be in the address bar.
The URL was correctly updated.
Angular didn't have a problem with updating the URL.
Unfortunately, not everything was updated.
If we look at the title, it hasn't changed.
Nothing's wrong with angular.
It's the default behavior of the framework.
Whenever we navigate to different pages, Angular will destroy the component of the previous routes.
Angular will notice we're redirecting ourselves to the same page.
It will not destroy a component if it's the same component.
Otherwise, we would be wasting resources and impact performance.
It's not efficient to recreate a component if it's already been loaded.
This behavior works great in our favor.
On the other hand, we need to grab the root parameter.
Let's go back to the editor.
Angular provides two ways to grab information related to a route we can grab information about the route
from the snapshot objects.
Snapshots represent the route at a moment in time.
It does not get updated after we inject the service.
It's great for when we need to grab the router's information when the component is created.
It's not great for when we need to constantly grab the routes information at different moments in time.
Luckily, Angular exposes observables to listen for changes on the routes.
We will replace the code inside the Nji on init function with an observable called this dot route,
not params.
The params property is an observable, this observable will push values whenever the roots parameters
have changed.
Let's subscribe to the observable.
Inside the subscribe, we will pass and an oral function to accept the params object.
The value pushed by the observable will be the same object of parameters from the snapshot object.
Optionally, we can add a tape to this argument if you're interested in type checking at the top of
the file.
We will import the params type from the angular slash route package.
Next, we will annotate the params argument with this type.
Inside this function, we will set the ID property to the Params Scott ID property.
By subscribing to the params observable, we should be able to update the ID property of our component.
Let's test our app one more time.
When you're loading the upload page, update the path in the URL to a different clip other than be.
Next, click on the clip in the more clips section.
This time, the title will be updated.
Mission accomplished.
We were able to update our component whenever the user navigates to a different clip.
This information is going to be helpful once we start uploading files.