Routing in Angular 4

In this section, we will continue our routing discussion. Therefore, let’s get started. First we will see how to pass query parameters and then we will try to retrieve the same.

Here, I have added another link for printing reviewers name.

Apart from above link change, my page looks like

And corresponding TS file looks like

With the above change in place it looks like. Point to note in the markup is the complex route.

However, If I click on any of the names, route will get changed and corresponding value will get printed on the screen.

Now, this is because its considering edit as name input. Anyways, that’s fine. Now, let’s consider, we need to send query parameters with this. We can do the same by using another bind-able property [queryParams].

It takes name-value pair like shown below. Below, I have passed two key-value pair for example. You can pass as many as required.

Since, I have passed, multiple key-value pairs, hence if I click on the name on reviewers page, it params will be separated via & operator.

Likewise, we can add fragments to our routes

With the above change in place, it will look like

This we have set via markup. Now, the same thing can be set programmatically as well. For instance, let’s go back to home component and do the following.

And, corresponding change in TS code.

With the above change in place, when I click on Load Route button, it will bring the same result. Therefore, here we have seen how to pass queryParams and fragments. Now, let’s see how to retrieve the same. This is fairly simple.

Here, on OnInit method, I have just used activatedRoute method to fetch the same. With that being said, If I go ahead and see the console, it will print like