Use the Angular 2 router to navigate between components when the user clicks a link.
We take a look at
<router-outlet> and more.
In the text below, when you see a word or phrase, click on it to highlight the source code.
Also, take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.
This is the simple demo application we will be using. We'll see how the router manages the contents of the colored area whenever a link is clicked. Go ahead, give it a try.
First let's take a look at our
We also include a
http://example.com#/green), the router will output the appropriate content in
Next we configure the router to handle the
paths that we specified in the
routerLink directives in our menu.
To do this, we build an array of objects which map our
/green when the path is empty.
This array is then passed into the
RouterModule. The return value from this method is exported so that
we can include it in our module.
Our route definitions are added to the module by including the
imports property of the
LocationStrategy which tells Angular to represent its state in the hash fragment of the browser's URL,
This overrides the default of
which produces a URL like this:
So when the user clicks one of the
disabled class to the element.
To find out how to use child routes, see this Angular 2 Child Routes tutorial.
The source code for this tutorial is available in the angular-2-router GitHub repo.