This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Build Angular 2 Navigation with routerLink

0:38 Angular 2 lesson by

Angular 2 navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular 2’s router to navigate between your defined routes.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Angular 2 navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular 2’s router to navigate between your defined routes.

To create some navigation, I am going into my app.component.ts, where the router-outlet is in my template. I'll just say nav. I'll create a tag, and instead of href, I am going to use a directive called routerlink. This routerlink is going to be empty because that one's going to point to "Home", when I click on this.

app/app.component.ts

import {Component} from "@angular/core";
@Component({
  selector:"app",
  template: '
<nav>
<a routerlink="">Home</a>
</nav>
<router-outlet></router-outlet>
'
})
export class AppComponent{}

The second one, not href but RouterLink, is going to point to "contacts", so this one will load contacts. Just format this a little bit and hit save.

app/app.component.ts

@Component({
  selector:"app",
  template: '
<nav>
<a routerlink="">Home</a>
<a routerlink="contacts">Contacts</a>
</nav>
<router-outlet></router-outlet>
'
})

You'll see how the navigation of home, contacts, home, contacts change in the URL, and load in those individual modules.

Browser output

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?