Skip to content

Lab 2: Routing

Jump to bottom
Christian Liebel edited this page Mar 19, 2018 · 2 revisions

1. Update repository

On your command line, perform the following steps:

$ git reset --hard
$ git pull

2. Lab

The speaker was so kind and introduced routing and a new component for you. Make sure to check out the app.routes.ts file. This component will show details to a Star Wars character based on its ID of the Star Wars API. The route for this new component is parameterized. The ActivatedRoute injected in the StarwarsComponent’s constructor will give you the ability to update the component based on a change of the route parameter, without re-instantiating it.

  • Subscribe to parameter changes of the id parameter. Refer to the Angular Router tutorial if necessary.
  • Call the SWAPI using Angular’s HttpClient. Refer to its documentation if necessary.
  • Make use of RxJS’s switchMap operator in order to cancel the in-flight network request in case the Route is updated or left. Refer to this tutorial if necessary.
Bonus
  • Bind more details of the Star Wars character in the view of the component.
  • Handle the error
  • Show a loading animation.

Clone this wiki locally