Lesson Tuesday

In the last lesson we learned how to update our Firebase entries directly through an Angular 2 application. However, an administrator of our site may also decide to no longer carry an item. Perhaps it's out of stock, or we've simply opted to stop selling it.

In this lesson we'll add functionality to delete Albums from both our application, and its Firebase database. This will conclude the development of our online store together; but at the end of this lesson we'll discuss potential ideas for developing this project further, and making it uniquely your own.

Deleting Firebase Entries

Like our other interactions with Firebase, our dedicated AlbumService will manage locating and deleting Firebase entries. Our existing EditAlbumComponent will contain code to trigger this process.

Event Binding

First, we need an event binding to trigger the deletion process. We'll add a delete button to our EditAlbumComponent template:

src/app/edit-album/edit-album.component.html
<h4>Edit Album</h4>
<label>New Album Title:</label>
<input [(ngModel)]="selectedAlbum.title">
<br>
<label>New Album Artist:</label>
<input [(ngModel)]="selectedAlbum.artist">
<br>
<label>New Album Description:</label>
<input [(ngModel)]="selectedAlbum.description">
<button (click)="beginUpdatingAlbum(selectedAlbum)">Update</button>
<hr>
<button (click)="beginDeletingAlbum(selectedAlbum)">Delete</button>

This button includes an event binding that triggers a beginDeletingAlbum() method when clicked, passing in the selectedAlbum.

We'll define this method in the EditAlbumComponent class declaration:

src/app/edit-album/edit-album.component.ts
...
  beginDeletingAlbum(albumToDelete){
    if(confirm("Are you sure you want to delete this item from the inventory?")){
      this.albumService.deleteAlbum(albumToDelete);
    }
  }
...

Here, we display a pop-up confirmation, asking the user if they're sure they'd like to delete this item. If the user clicks ok the method will invoke our existing AlbumService, and request it run a method called deleteAlbum(). We pass in the Album the user has selected to delete as an argument.

Deletion Method

After the last lesson, the AlbumService should already be injected into our EditAlbumComponent. So, we just need to define a deleteAlbum() method within it:

src/app/album.service.ts
...
  deleteAlbum(localAlbumToDelete){
    var albumEntryInFirebase = this.getAlbumById(localAlbumToDelete.$key);
    albumEntryInFirebase.remove();
  }
...
  • deleteAlbum() takes the local copy of the Album the user has requested to delete as an argument.

  • It calls the existing getAlbumById() method to locate the Firebase entry corresponding to this Album. We assign the Firebase entry to the variable albumEntryInFirebase.

  • getAlbumById() requires the Firebase-assigned $key as an argument. So we call localAlbumToDelete.$key within the argument to getAlbumById().

  • After the database entry has been located, we call AngularFire's built in remove() method on albumEntryInFirebase. This removes the entire entry from our Firebase database.

  • As soon as the entry is removed in Firebase, our list of all Albums will instantly update, removing the deleted Album from our application as well.

And, that's it! We should now be able to visit our localhost:4200/admin route, select an Album to delete, press Ok in the pop-up confirmation and the Album will disappear from both our Firebase database, and our Angular application.

Further Exploration

As mentioned above, this concludes our development of the Online Marketplace application together. This application served as a tool to practice and demonstrate new Angular concepts throughout the week.

However, consider transforming this project from a basic utility used to practice new concepts into a more unique portfolio piece. Here are just a few ideas to develop this project further, if you choose:

  • Add event bindings to hide/show edit forms in the Admin dashboard.
  • Add CSS rules to alter the color of areas that behave like links when the cursor is hovered over them. This helps users better understand what is "clickable" and what isn't.
  • Begin offering more than just Albums, and include different routes to display different types of inventory.
  • Add a price property to each item you sell.
  • Implement pipes to filter by price, type of object, or other properties.
  • Allow users to add items to a cart (Hint: Services make great shopping carts!).
  • Allow users to visit their cart, and "check out". They should receive a total cost for the order, and perhaps even a receipt.
  • Add images, and styles throughout. Consider a design of your own invention, or emulate the general design of your favorite online store.