Build Reactive Websites with RxJS: Master Observables and Wrangle/

...

/

Editing a Single Photo

Editing a Single Photo

The last major task is to build out a page to edit individual photos. Let's see how we can tag and save photos in Angular.

We'll cover the following...

Editing photos

Now that the user can search and save photos, it’s time to add the final major component: editing a saved photo.

The first requirement is simple: get a single photo from the API. While it’s possible to reuse the getSavedPhotos method and just filter down to the requested ID, it’s more elegant to have a function just for this purpose, and adding a method won’t complicate things too much. Add a getSinglePhoto method to PhotosService:

Press + to interact
getSinglePhoto(photoId) {
    return this.http.get<IPhoto>(this.api + '/getSinglePhoto/' + photoId);
}

Next, you need to tap into that new method. Open up edit-photo.component.ts and add the following (import as needed):

Press + to interact
constructor(
  private currentRoute: ActivatedRoute,
  private photosService: PhotosService
) {}

  • Line 2: Injecting an ActivatedRoute results in an object that represents the current route. We’ll use this to grab information about the route itself.

  • Line 3: This is the photo service created earlier. In this case, we’ll use it to fetch a single photo rather than do a search.

currentRoute object

Once everything’s injected, it’s time to figure out what photo the user wants to edit. The currentRoute object has a property paramMap, which is an observable that returns the latest ...

Access this course and 1400+ top-rated courses and projects.