In this lecture, we are going to take advantage of angular root parameters feature for generating a
dynamic page.
Currently, I have these static template for the video page opened in my browser.
We want users to be able to share clips with their friends.
We should assign a unique URL for each video.
There's just one problem we don't want to register a route for every video.
It's not a scalable or efficient solution.
If our app had millions of clips.
We would have millions of routes instead of generating numerous routes.
We can generate one route to handle all clips.
Paths can have dynamic segments.
Wikipedia is a good example of dynamic segments.
In another tab, I have the Wikipedia page for pizza opened in the URL.
We can change the word pizza to hamburger.
This simple modification will render an entirely different page.
Wikipedia is not generating unique rules for its countless articles.
Instead, they have one route to handle all pages before it delivers a page.
It'll grab the dynamic portion of the URL to determine which content to render.
We can implement similar behavior in our app.
Angular supports dynamic segments called route parameters.
We are going to create a route for videos with a route parameter.
We will be able to render a video based on the parameter in the URL.
We haven't worked on uploading videos, so we will output the route parameter in the template as a temporary
placeholder.
Let's open the command line.
First, we are going to generate a component to house the content for the video page inside the command
line.
Run the following command Angie G.
Component clip.
You'll notice that we're not generating the component under the video module, watching clips will be
a common action most users will perform.
However, most users will probably not upload a clip.
The action of managing and uploading videos will be a separate module.
Let's grab the template for this component.
Open the video HTML file in the Templates directory.
Inside this template, we have two sections with the comments, main content and more clips.
We are going to copy both sections.
Next, open the clip template file.
Replace the existing template with the template we copied earlier.
Our component is ready, let's register a route.
Open the app routing module file.
At the top of the file, we will import the clip component.
Next, we will add an object to the roots array inside this object.
We will set the Path property to the following value clip slash colon ID.
Pay close attention to the second segment in the past.
We are pre fixing the name of the segment with a colon character.
Angular will interpret this as a root parameter.
A root parameter is a placeholder for any value.
After the colon character, we need to give our root parameter a name.
We will be able to reference the parameter by this name and this example.
This portion of the URL should hold the ID of the clip before we proceed further.
We should test if the Root is working in the browser, refresh the page.
We haven't created a URL for this page.
We will in a future lecture.
For now, let's manually navigate to the page in the address bar.
We will access the clip path with a random number.
The page renders like any other page, unlike other routes, we have complete freedom over the value
in the path.
We can change this path to a different number.
We can even use random characters.
We're not restricted to a type of value.
The same page gets rendered.
Great.
Let's learn how to retrieve the value from the URL.
It's an encoded value we can retrieve in our components.
Back on the ED Open the clip component class file.
At the top of the file, we will import the activated route class.
We've encountered this class before, it's going to give us information related to the current routes.
Unlike before, we won't encounter as many issues, the clip component is managed by the Router Outlet
Directive.
The activated route service will be more cooperative than before.
Let's inject this class into the constructor function.
The goal is to retrieve the I.D., we should store the ID in our component above the constructor function.
We will add a property called I.D. with an initial value of an empty string.
Next, inside the Nji on in it function, we will update the ID property to the following value this
micro snapshot.
Dot params dot ID.
We can grab information about the current route through the snapshot object inside this object.
The parameters are conveniently stored in an object called params.
As you might suspect, we can have multiple route parameters in a single path.
We can reference any parameter by its name.
If we did everything right, we should be able to output the ID in the template switch over to the eclipse
templates.
We will output the ID in the title of the page.
You can find the title under the comment that says title and uploader and the H1 tag.
We will replace these static text with an expression.
The expression will output the ID property.
Let's refresh the page.
The IED gets out, put it onto the template, accessing the ID is relatively simple.
We can inject a service defined by the route or to grab data related to the current routes in the next
lecture.
We will look at one common gotcha with route parameters.