Advanced TypeScript Programming Projects

The routing user interface

The final part of adding routing support to our application is to set up the contents of app-component.html. In here, we are going to add a toolbar that will contain links to our pages and a place to show the page components themselves. The toolbar simply contains three navigation list items. The interesting part of each link is routerLink, which ties our link back to the addresses we previously added in. Effectively, what this part is doing is telling the code that, when we link in that route, we want the content to be rendered into the special router-outlet tag, which is just a placeholder for the actual component content:

<mat-toolbar color="primary"> <mat-nav-list><a mat-list-item routerLink="all">All tasks</a></mat-nav-list> ...