Angular 2 Routing Example TypeScript

Navigation is one of the most import parts in an application, well, in most cases. That is what we will be learning from this tutorial – Routing.

 

In this tutorial, we will be creating an application that literally has 2 main pages: – Fruit and Veggie, and 1 sub page that shows details of the selected fruit or veggie.

 

Folder Structure

This is the folder structure of this example. You may want to download the source code.

Angular 2 Routing Example TypeScript folder structure

boot.ts

In order to use routing, we need to add ROUTER_PROVIDERS  to the injector. This is done via the second parameter of the bootstrap  function.

app.component.ts

This is our main component – AppComponent . This is where we configure routes. You may also notice that we inject ROUTER_DIRECTIVES . We will talk about this later.

app.component.tpl.html

This is the template of AppComponent. It has 2 menus: – Fruit and Veggie. We use routerLink directive to create a link pointing to the routes that we configured above and use router-outlet component to set a placeholder that Angular fills based on route. The reason why we injected ROUTER_DIRECTIVES above is because RouterLink  and RouterOutlet  are from ROUTER_DIRECTIVES .

 

Below section is about the FruitComponent and VeggieComponet that you saw above in app.component.ts. They effectively are the fruit page and veggie page. You can actually skip them, If you already know about custom component.

 

fruit.component.ts

fruit.component.tpl.html

In this fruit page, we use routerLink directives again to create 3 static links, but this time, we also set a parameter on the link, or route parameter if you link. We will then be able to get the parameter in product detail page.

veggie.component.ts

The veggie component is slightly different from the fruit component, in that it will be creating links dynamically. For this reason, we initialize an array call veggies in below.

veggie.component.tpl.html

So in the template, we can use ngFor to iterate the veggies array and create links dynamically.

product-detail.component.ts

Now, this is the last component that we create in this tutorial. It will also give you an idea on how to retrieve route parameters and how to inject and use Location  service to navigate back to the last page.

product-detail.component.tpl.html

A simple page that allows you to go back to the previous page.

index.html

As usual, the index.html to wire up everything together.

Demo

Here is some screenshot of the example. Simply follow the steps above or download the source code to see the same result.

index.html

Angular 2 Routing Example TypeScript demo index

Click the “Fruit” link, the fruit page shows.

Angular 2 Routing Example TypeScript demo fruit page

Click the “Veggie” link, the veggie page shows.

Angular 2 Routing Example TypeScript demo veggie page

Click on the “Tomota” link, the product detail page shows Tomato and a back button.

Angular 2 Routing Example TypeScript detail page

 

Resources


facebooktwittergoogle_plusredditlinkedin

Wayne Hong

Passionate Java full stack developer.
  • Deadly

    Finally! A guide that actually uses angular2 routing properly. Been scouring the net for ages. This is great. Nice, concise, clear. Thanks!