Angular Routing Part 2

Angular Routing Made Easy — Part 2

The image shown above contains a lot of twists and turns compared to “Angular Routing Made Easy — Part 1 ”. Well, it should be that’s why…

Angular Routing Made Easy — Part 2

The image shown above contains a lot of twists and turns compared to “Angular Routing Made Easy — Part 1 ”. Well, it should be that’s why it is Part 2.

In Part 1, we have gone through the basic concepts of Routing with a simple tutorial of setting up routes in an Angular Application. In this tutorial, we are going to cover:

  • Setting up child routes
  • Activated Routes

Ok, so let’s get started with them one by one :)

Setting up child routes

Let’s travel today from India to USA to understand child routes, and thanks to our planet, that it is round :) so, we have two options:

  • Via Atlantic
  • Via Pacific
India to USA

Here, we call the parent path that we need to cover “India-USA” path, and options we have while covering this path are the “child-routes”.

Let’s change these thoughts into code:

  • We need to create a parent componentIndia-USA with two functionalities viaAtlantic() and viaPacific()
  • We need to create two child components Atlantic and Pacific
  • We need to configure our components by telling Angular that Atlantic and Pacific components are child routes of India-USA parent route.

Creating India-USA component

  1. The india-usa.component.html file should contain two buttons to help us to reach USA that are viaAtlantic and viaPacific.

Some important things to focus here are:

  • We need to import ActivatedRoute and Router module from @angular/router.
  • The object { relativeTo: this.router} ensures that the path remains relative to its parent path. So, in this case, the paths should be india-usa/atlantic and india-usa/pacific

2. Now, our next step is to create Atlantic and Pacific components so that they can render in place of router-outlet. Building them is the most straightforward task :)

Creating Atlantic Component

Creating Pacific Component

3. Finally, we need to configure our Angular Application that Atlantic and Pacific are the child routes of India-USA . We do this, by declaring children[] and defining the path and components inside it.

And, here is the output :)

India-USA Routes

Now our path are set, and we are ready to go to USA. Let’s explore more inside the plane :p

Parameterized Routes

Traveling in a plane is always exciting, and as I am a foodie, I am still more excited about the food rather than the travel :p

Now, traveling via Atlantic and Pacific have different menu lists. Also each menu list on the screen contains menu ids for ordering items. Just like this table:

Meals via Travelling via Atlantic ( left ) and via Pacific ( right )

We need to provide the right path along with order id to get our correct meal. For example: providing id=3 as india-usa/atlantic/3 will provide Vegetarian Meal.

Let’s change this into code:

We need to create two arrays defining the meals, and also we need a function to Book our meals and then we will pass the id of the meal to the function as a parameter.

Meals

As you can see the functions shown below navigates to the path according to the id passed in the URL, you need to pass the parameterized id’s inside the array in route.navigate method.

Tip: If you are planning to add more parameterized id’s you can keep adding them inside the array, and change the routes array accordingly in app.module.ts
pacificMenu(id){
this.route.navigate(['pacific', id], { relativeTo: this.router});
}
// india-usa.component.ts

Also, we need to tell our routes array that we are using parameterized routes, for that we attach, /: after our parent route, as shown for atlantic and pacific paths:

Now, if we book the Lacto meal in PacificMenu, we have the path localhost:4200/india-usa/pacific/2 , but we need to print the meal id on the screen as well, which means we need to extract the meal id from the URL.

After providing path localhost:4200/india-usa/pacific/2 we are going to render the menu component, showing us menu id booked.

Creating Menu Component

Similar to Atlantic and Pacific components, we will create a menu component.

After creating the menu component, we will use ActivatedRoute Module to obtain the selected id from the URL, the ActivatedRoute module contains a paramMap method which returns an Observable. As it is observable, whenever the URL id changes, angular updates the binding in the view.

ActivatedRoute contains the information about a route associated with a component loaded in an outlet

Some important points to note here:

  • + operator used in (params.get('id')) to change the string id obtained from the URL into the number id.
  • Once the URL is updated with the new id, (params.get('id')) gets changed and henceselected value binded inside the template changes.

Finally, our path to USA is decided and our meal in the plane is booked :)

Meal Booking

I hope, this new way of visualising routing will help you to memorize it better. Routing is fun, you just need to practice it once :)

For complete code please check:

Have a safe journey :p

If you liked the article, please clap your heart out. Tip — Your 50 claps will make my day!

Please also share on Fb and Twitter. If you’d like to get updates, follow me on Twitter and Medium. If anything is not clear or you want to point out something, please comment down below.


© 2019. All rights reserved.

Powered by Hydejack v8.1.0