Hi Friends,

Hope you are well. First of all thank you guys, for reading my posts and supporting me by sharing my posts on social media. In this post I will explain the concept of Routing in Angular 2.

Routing is nothing but enabling navigation to different pages of the application. Applications have become much faster (Thanks to SPA’s) and routing acts as a glue to your entire app.

Let’s begin.

The entire code of this tutorial can be found here.

A video screencast of this tutorial can be found below.

 

As usual, I would start from scratch and show you how Routing is done in angular 2 apps.

Let’s get the angular-2 seed from the official site using the below command.

Navigate to the directory(angular2routing if you used the above command as it is) and give the below command.

Once this is done; Let’s go ahead and include the bootstrap-material design files in our index.html.

I have used cdn links to reference these files instead of installing them into our app for simplicity.

Now create a new file called app.component.html and add the below the code.

This will add a beautiful navbar on the top with two links namely About Us and Pricing.

Now let us go ahead and create these two pages.

create a file aboutus.html and add the below code.

Then create a aboutus.component.ts file and add the below code.

Nothing fancy, I have just created an array and then used ngFor to display the elements of the array on the aboutus page. I will let you know what ROUTER_DIRECTIVES does in the later part of the is tutorial.

Now create a new file called pricing.html and add the below code.

Then create another file pricing.component.ts and add the below code.

Okay., Now we need to link these up to the Links on the navbar right ? Lets do that.

Open up index.html and below the <script src=”node_modules/angular2/bundles/angular2.dev.js”></script> line add the following line.

Now open up main.ts and add an import for ROUTER_PROVIDERS.

ROUTER_PROVIDERS is nothing but a constant array which has references to all the router classes. By adding this to the bootstrap method we need not import it in each and every ts file to make use of the router classes.

Get back to the app.component.ts file and write Router configurations. The app.component.ts should look as shown below.

Let me break this down.

1. There are 3 route config lines. one for about us page, one for pricing page and one to redirect all the wildcard url patterns; i.e., when a user enters any other url other than these.
2. The useAsDefault: true is used to set the default page when the page loads.
3. ROUTER_DIRECTIVES is a constant array that will contain a reference to RouterOutlet and RouterLink classes which we would use here.

Now open up app.component.html file and add the <router-outlet> selector at the very bottom as shown below.

This will indicate the place where the pages (AboutUs or Pricing) is to be loaded. Or in other words by adding this to the bottom of the app.component.html the pages will be loaded below the NavBar always.

Okay.. now modify the <a> tags in app.component.html as shown below. Your app.component.ts file would look as shown below.

Now you would a screen similar to the one shown below.

If you click on the pricing or About us you could see that routing works fine.

Wow.. That was quick.

Now let us see how we could pass Parameters while navigating; i.e., RouteParams.

We will make the list items on the About us page clickable. Modify the code in the aboutus.html page. It should now look as shown below.

I have just added a anchor tag which will navigate to MemberDetails component and pass an id along with it.

Now go ahead and create a memberdetails.html file as shown below.

create a memberdetails.component.ts and add the below code.

As you could see I have a button in this page which is kind of like a back button. I am simply using it along with the router class to navigate back to the AboutUs page.

Now open up app.component.ts file and modify the code as shown below.

As you can see I have added a new line in the RouterConfig which includes the url pattern along with the id.

Now if you recall (or scroll up) you would understand why we sent the id in the aboutus.html anchor tag. There I had just sent the index of the array as id. Usually its the id of the list element that you are clicking which is got from the server.

Now if you click on any of the link and see the address bar of your browser you could see as shown below.

The id 1 gets passed along with the Url. This is how you pass parameters or rather use RouteParams in Angular 2.

That’s it guys. Now we have learnt how to implement Routing in a Angular 2 App, and passing parameters.

Hope this helped you guys. Thanks for reading. Please watch the video for a better understanding.

Peace..