Lab 10: HTTP Client

Objectives

• Set a fake API using json-server
• Make use of the HttpClientMosulde and create/use related services to fetch data from an API

Tasks

Task 1: Set up the backend

Since we will work with rest we want to have a fake API to work with. We will use json-server to set up a fake API. This is perfect to simulate a real API and to work with the HttpClientModule.

• Install json-server using npm
  • npm install -D json-server
• Create a db.json file at the root of your project with the content you can find on:
  • https://bitbucket.org/treelevel/workspace/snippets/97xLMB
  • Let’s edit our package.json file to add a new script:
  • "json-server": "json-server --watch db.json"
  • Now you can run npm run json-server to start the server
  • You can access the data on http://localhost:3000/albums in your browser
  • Keep the server running while you are working on the lab… You can open another terminal while this one is still running if you need.

Task 2: Create the AlbumService

• First thing to do is to import the HttpClientModule in the app.module.ts file

• Then create a new service called AlbumService using the Angular CLI

• The service should have the following methods:

  • getAll(): Observable<Album[]>
  • get(id: number): Observable<Album>
  • add(album: Album): Observable<Album>
  • update(album: Album): Observable<Album>
  • delete(id: number): Observable<Album>
  • getRandomAlbum(): Observable<Album>

• Use a combination of pipes to get a Random Album:

  • use GetAll to get all the albums
  • then pipe the data to get a random album in a map

[HINT] Remember that the map operator is used to transform the data emitted by the source observable. You can use it to get a random album from the list of albums and return this album.

  getRandomAlbum(): Observable<Album> {
    return this.getAll().pipe(
      map(albums => {
        const randomIndex = Math.floor(Math.random() * albums.length);
        return albums[randomIndex];
      })
    )
  }

Task 3: Consume the service

• In the album-detail-component.ts, album-of-the-day-component.ts, album-list.ts file, replace injected AlbumStaticService by AlbumServiceservice
• Correct all errors related in each components by subscribing to the Observable returned by the AlbumService methods

Task 3.1: Fixing the album-of-the-day-component.ts

• Things should not really work as expected, you will need to fix the issues regarding the album-of-the-day-component.ts
• For the year, you can use the date pipe to format the date:

    <p>Year: {{albumOfTheDay.releaseDate | date:'yyyy'}}</p>

• Now in the console we have an error:

  ERROR TypeError: ctx.albumOfTheDay is undefined

• This is because the albumOfTheDay is not loaded yet when the component is rendered.
• let’s fix this using an *ngIf directive:

<article *ngIf="albumOfTheDay">

Task 3.2: Fixing the album-detail.component.ts

• When reaching the album details component all seems to works but cliking on the next or previous button will throw an error
• This is because we need to get the Error throwed by the get method of the AlbumService and redirect to the HomeComponent if the album does not exist

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      const id = params.get('id')
      this.albumService.get(Number(id)).subscribe({
        next: album => {
            this.album = album
        },
        error: error => {
          this.router.navigate(['/home'])
        }
      })
    })
  }