Router directives

I know you're itching to see the example in the browser, but if you try testing the app at port 4200, you will still see the content of the app component. This is because we haven't told Angular where it should mount the route.

Angular exposes two important route directives:

  • Router outlet: This defines where the route configuration should be mounted. This is usually in an entry component for single-page apps.
  • Router link: This is used to define the navigation for Angular routes. Basically, it adds features to the anchor tag so as to work better with routes defined in an Angular app.

Let's replace the content of the app component's template to utilize the router directives:

<div>  <nav class="navbar navbar-inverse"> <div ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.