Navigating A Web Application With The Angular 2 Router

I’ve been keeping up with Angular 2 since the beta releases and if you have too you’ll know that navigation has changed about one hundred times between then and the now stable release.  Navigation with the Angular 2 Router component is a tricky subject, but understanding it is necessary for pretty much every quality Angular 2 web application.

I wrote a now obsolete tutorial on how to navigate between Angular 2 routes back when Angular 2 was in beta.  Since Angular 2 is now stable, I thought it would be a good idea to share how to navigate between pages with the stable Angular 2 Router component.

To make this easy to understand, we’re going to focus on creating a multiple page Angular 2 application based on the Angular 2 CLI.  If you don’t already have the Angular 2 CLI, instructions on how to install it can be found here.

With the Angular 2 CLI installed, execute the following from your Command Prompt (Windows) or Terminal (Mac and Linux):

Navigate into the new project so we can continue to use the CLI to perform certain actions.

The next thing we want to do is generate two components that represent each of our two application pages.  This can be done by executing the following from the Terminal or Command Prompt:

Executing the above commands will generate the appropriate HTML and TypeScript files.  While Angular 2 is in GA, as of right now the CLI is not.  This means it is missing a few features that we’ll have to take care of manually.

Declaring the Application Routes and Components

Before we can navigate to these freshly created components we have to define them as navigation routes in our application.  Create an app/app.routing.ts file in your project and include the following TypeScript code:

In the above code we’re importing the two components and assigning them to a particular path.  The default path, which is shown at application start, will have a blank path.

For code cleanliness we take all imported components and add them to an array to be included in the next step.  We don’t have to do this, but it can easily get messy if we don’t.

Bringing the Routes Together via the NgModule

The routes are created, but they are not included in the application as a whole.  Anything we want to include in the entire application is done in the @NgModule block of the project.

Open the project’s app/app.module.ts file and include the following TypeScript code:

Much of this file was created by the Angular 2 CLI.  However, notice in the declarations we’ve included ...AppComponents which was created previously in the app/app.routing.ts file.  Remember how I said it could get messy if we didn’t add the components to an array?  We could, if we wanted to, import and add each component here, but we chose not to.

Also take note of the imports and the following two lines:

This is where we add the routes that we had defined.

Creating an Outlet for Displaing Route Components

The routes need to pass through something in the UI layer to become visible.  If you’re familiar with AngularJS 1, you’ll be familiar with the HTML <div ui-view> tags.  More information on AngularJS 1 routing can be found in a previous tutorial that I wrote..  It is very similar in Angular 2.

In the project’s app/app.component.html file, include the following code:

In Angular 2 we use the <router-outlet> tags to accomplish this task.  Nothing complicated, which is good for us.

Navigating Between the Application Pages with the Angular 2 Router

The pages are now ready to go.  Let’s build some very simple pages and check out how to navigate between them using the Angular 2 Router component.

We’re going to start with the first page.  Open the project’s app/page1/page1.component.ts file and include the following TypeScript code:

Take notice of the fact that we’re importing and injecting the Router and we’re also using it to navigate.  Inside of the navigate method we attempt to navigate to page2 which is a path that we had defined in the app/app.routing.ts file.  This isn’t the only way to navigate.

Let’s create the basic HTML and see how to navigate via HTML markup as well.  Open the project’s app/page1/page1.component.html file and include the following markup:

Notice the use of the [routerLink] in the above markup.  We’re able to use TypeScript or directives to accomplish the task of navigation.

With the first page out of the way, let’s have a look at the second page.  Open the project’s app/page2/page2.component.ts file and include the following TypeScript code:

In the above code we’re not including the Router.  Instead we’re including Location which will allow us to navigate backwards in the navigation stack.

Open the project’s app/page2/page2.component.html file to add the matching HTML markup:

Nothing too different from what we saw previously.

Conclusion

You just saw an up-to-date use of the Angular 2 Router.  While the previous tutorial I wrote has useful information, it doesn’t really help in terms of navigation in a stable-release Angular 2 application.

There is a whole lot more you can do with navigation.  For example you could also pass data between pages, but that is best explored in another tutorial.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Peter

    It Would be great if you could make a course about web development with Angular 2 and Go.

    • It is already in my queue 🙂

      • Peter

        Thank you Nic. It would be great if you could consider a video course.
        I believe it would be highly demanded specially if it is a +20 hours course.
        Going through a serious course about Go and Angular 2 with a real
        application from the bottom would be something really appealing for
        new programmers.

  • Ahmed

    hi i need use admob in NativeScript with angular2 and typescript
    can you tell me how i can do it or write post to explain a way do it
    like this https://www.thepolyglotdeveloper.com/2016/03/monetize-with-google-admob-in-a-nativescript-mobile-app/

    many thanks

  • Hans Schenker

    use declarativ routerLink instead of imperativ navigate

    • Using the routerLink directive is an option as well, and I forgot to include it in the article. I’m not sure I would agree that one method is better than the other. They both work well and provide two ways to solve a problem.