Saving New Data
Once the user has decided which photos they’d like to save, they need a functioning Save button. Time to hook the Save button up to PhotosService so that the backend can store photos the user would like to recall and edit later.
Clearing saved photos | |
|---|---|
|
If you want to clear the saved photo database at any point, it’s stored in photos.json in the asset-server directory. |
Time to add a new method to the PhotosService that sends information about a new photo to the server, which will add the photo to the database. HttpClient provides a post method to send a POST request. The first parameter (like get) is the URL to send the request to, and the second is the request body:
| | addNewPhoto(photoUrl: string) { |
| | this.http.post<IPhoto>(this.api + '/addNewPhoto', { |
| | url: photoUrl |
| | }) |
| | .subscribe(); |
| | } |
In this case, the function has an empty subscribe call so that the request will be made. In a production application, a centralized error handler could be passed in to every otherwise-empty call to subscribe. Now that there’s a method for saving a photo, it’s time to connect it to the results list view. Parentheses around an event name is Angular’s syntax for “Run this code when this event happens.” In this case, we want to call addNewPhoto whenever the user clicks Save:
| | <button class="btn btn-default results-btn" |
| | (click)="photosService.addNewPhoto(photoUrl)">Save</button> |
Now that the user can save photos, it’s time to introduce routing between multiple components so the user can view and edit the photos they’ve saved.