Remove object from Firebase using AngularFire 2

Question

I am trying to create a delete function that will get the delete my object from the Firebase.

I have the following structure on FireBase:

recipes   recipebooks      recipesPerRecipebook
  - id          - id        - recipebook_id
  - id          - id           - recipe_id: true

What I want to do is when I click delete I want to remove the recipe_id from recipes and the remove it also from recipesPerRecipebook/${recipebook_id}

I created a function in my recipes.service.ts

deleteRecipe(recipe_id:string, recipebook_id:string) {
    this.sdkDb.child('recipes').remove(recipe_id)
      .then(
        () => alert('recipe deletion requested !')
      );

    this.sdkDb.child('recipesPerRecipebook/${recipebook_id}').remove(recipe_id)
      .then(
        () => alert('recipe Association deletion requested !')
      );
  }

I then have this in recipeDetails.component.ts

delete() {
    this.recipesService.deleteRecipe(this.recipe.$key, this.recipe.recipebook_id);
  }

I get the following error:

error_handler.js:54 Error: Firebase.remove failed: first argument must be a valid function.

I have two questions, firstly and most importantly where am I going wrong. And secondly doing this.sdkdb.child(... twice feels a bit wrong and cumbersome could I simplify this?

score 8 · Accepted Answer · answered Nov 17 '16 at 11:48

8

Looks quite odd.

Please take a look at the official docs: https://github.com/angular/angularfire2/blob/master/docs/2-retrieving-data-as-objects.md#deleting-data

So you should be able to delete an object like this:

af.database.object('/--your-list-name--/--your-obejct-key--').remove();

where af is the injected AngularFire2 service.

answered Nov 17 '16 at 11:48

slaesh

16,659
6
50
52

The link in your answer is dead. Could you replace it with a working link? – André Kool Apr 05 '18 at 11:12
Behavior completly changed in newer versions.. see here: https://github.com/angular/angularfire2/blob/master/docs/firestore/documents.md#manipulating-documents – slaesh Apr 06 '18 at 11:05

cartant · Answer 2 · 2016-11-18T07:56:03.020

The problem is that's not how remove should be called.

If you look at the documentation, you will see that remove takes an optional callback.

So you would have to call it something like this:

deleteRecipe(recipe_id:string, recipebook_id:string) {

  this.sdkDb.child(`recipes/${recipe_id}`)
    .remove()
    .then(() => alert('recipe deletion requested !'));

  this.sdkDb.child(`recipesPerRecipebook/${recipebook_id}/${recipe_id}`)
    .remove()
    .then(() => alert('recipe Association deletion requested !'));
}

Also, in your snippet, your are not using back ticks for the second path, so ${recipebook_id} won't be evaluated and replaced.

If you want to remove the two paths in a single operations, you can use update:

deleteRecipe(recipe_id:string, recipebook_id:string) {

  this.sdkDb.update({
    `recipes/${recipe_id}`: null,
    `recipesPerRecipebook/${recipebook_id}/${recipe_id}`: null
  })
  .then(() => alert('deleted!'));
}

You might also want to consider returning the promise from deleteRecipe so that the caller can be informed of the deletion completing.

Remove object from Firebase using AngularFire 2

2 Answers2