Skip to main content

Lab 9: Observables

Objectives

  • Make use of the ActivatedRoute service to read the parameters of the URL using observables

Instructions

  • We want in our album-detail.component.ts to have a previous album and next album button
  • Clicking on those buttons should redirect to the previous or next album using navigateByUrl the Router
  • To do so, we need to read the id parameter of the URL in a reactive way
  • Instead of using a snapshot, we will use the ActivatedRoute service to subscribe to the changes of the parameter
route = inject(ActivatedRoute);

Then later in the code

this.route.params.subscribe(params => {
console.log(params['id']);
});
  • We don't want to manage the use case of when next or previous album does not exist, we will let the user go to the HomeComponent if that happens

TODO: Make the slide mode detailed about steps