Skip to main content

Lab 6: Services

Objectives​

  • Use a service to get static data

Instructions​

Step 1: Create a service to get static data​

  • First, our album class need an id. So let's add an id to the album interface.
export interface Album {
  id: number;
  ...
}
  • Adapt your components so all albums have an ID. Make sure your app still compile
  • For now, we will use a service to get static data. We will create a service that will return a list of albums.
  • We also need to be able to have all crud operations on the albums.
  • So let's create a service AlbumStatic that will return a list of albums and that will have the following methods:
    • getAll(): returns all albums
    • get(id: number): returns the album with the given id
    • add(album: Album): adds a new album
    • update(album: Album): updates an album
    • delete(id: number): deletes an album

private albums: Album[] = [/*Contains some albums*/]

getAll(): Album[] {
   return this.albums;
}

update(album: Album) {
  const index = this.albums.findIndex(a => a.id === album.id);
  this.albums[index] = album;
}

// We are returning undefined if the album is not found, this come from the fact that we are using the find method
get(id: number): Album | undefined {
  return this.albums.find(album => album.id === id);
}
// Some more methods...

[HINT] To delete an element from an array, you can use the splice method.

Step 2: Use the service in the all the concerned components​

album-list.component.ts:​

  • Inject the service
  • Replace the albums array by an empty array and call the service in the constructor to get the albums.
albumsService = inject(AlbumStaticService)

albums: Album[] = [];

constructor() {
  this.albums = this.albumService.getAll();
}

album-of-the-day.component.ts:​

  • Here we have two approaches we can use to get a random album:
    • We can get all the albums and then get a random one from the array
    • We can create a method in the service that will return a random album
  • Let's use the second approach.
    • In the service, create a method called getRandomAlbum(): Album that will return a random album.
getRandomAlbum(): Album {
  const index = Math.floor(Math.random() * this.albums.length);
  return this.albums[index];
}
  • We don't need then to have two variables in the album-of-the-day.component.ts file, we can just call the service to get the random album:
    • When the component load (use the constructor)
    • When the user clicks on the button to get another random album
export class AlbumOfTheDayComponent {

  albumService = inject(AlbumStaticService)

  @Output() notifyParentToClose = new EventEmitter<boolean>();

  albumOfTheDay: Album

  constructor() {
    this.changeAlbumOfTheDay()
  }

  changeAlbumOfTheDay() {
    this.albumOfTheDay = this.albumService.getRandomAlbum()
  }

  closeAlbumOfTheDay() {
    this.notifyParentToClose.emit(true);
  }
}