Routing in Angular 4

In this section, we will delve further and see more about routing. Let’s see how to load routes programmatically first.

Let’s say, we would like to navigate to Movie’s Page from home page. In order to achieve that, we need to do following things first. Here, first I have included button on my home page, with click event in there.

After that, I have implemented the logic like shown below.

Here, I have done couple of things like first I have injected router in constructor and then onLoadMovies() method, I have just navigated to Movies route. Pretty Simple. With the above change in place, it will look like

Now, when I click it, it will take me to movies page like shown below.

Now, let’s consider you need to fetch a route based on id passed in. How can we achieve that? Well the easiest way is via dynamic binding. Below, I have pasted snippet explaining the same.

With that being said, here I am fetching reviewer with Id now. Here, :id can be substituted with anything. Below is the example of that. Now, based on the incoming Id, we need to fetch the reviewer say.

Here, I am fetching two route params. Therefore, I need to modify my code like shown below. Here, I am passing multiple parameters in URL say id and name.

With that being said. I have simple HTML markup to display the same like shown below.

With the above change in place, when I navigate to http://localhost:4200/reviewers/1/rahul. It will produce me below result.

Therefore, we can supply as many parameters as required. There is no restriction on that. Although, we don’t prefer that. However, If I don’t supply any of the parameters here, then it will give error, as it won’t match the route. Adding to this, we can also fetch parameters reactively like shown below in the snippet. Here, first I have added in the markup.

Here, I have used array approach to construct the URL which is really better as this gives us flexibility to construct the really complex URL. With the above change in place, it will look like this. However, when I click on Load Tom, notice URL gets changed, but value on page remains the same. This is not a bug. This is default behavior of snapshot object of route. Since, we are already on this component, hence it doesn’t instantiate the cycle as it costs performance. Therefore, by default angular won’t render the same component, if you are already on that component. Therefore, its fine to use snapshot for first load. But for subsequent events, we need to have different approach.

Here, we will use route.params property. route.params is a type of observable. Observable, we will discuss in detail in coming sections. But for now, just understand that observable is an easy way to subscribe to some event, which may happen in the future, then execute some code whenever it happens without having to wait for it now. Below, I have pasted my snippet for the same.

It takes three parameters. First one is important here. It will be fired whenever new data is passed through the observable or whenever parameter changes. Therefore, this will update the reviewer object, whenever the parameter changes. With the above change in place, when I refresh and click on Load Tom again, it will correctly print the value on the screen.