How to do a multi-location "remove" with AngularFire2 or Firebase in Angular2

Question

I want to run a combined operation to remove 2 nodes on Firebase in one operation. I know there is remove() to remove node if I have the node location. But what is remove() operation return? An promise or an observable? How do I know the remove operation is successful so I can run the other remove operation or tell my component the remove operation is successful (or there is an error)?

Example provide (need help on multi-location delete help with AngularFire):

constructor(private db:AngularFireDatabase, @Inject(FirebaseRef) fb) {
   this.sdkDb = fb.database().ref();
}

deleteTask(taskId: string, jobtypeId: string): boolen {
const taskObservable = this.db.object('tasks' + '/' + taskId);
const taskPerJobtypeObervable = this.db.object('tasksPreJobtype' + '/' + jobtypeId + '/' + taskId);
taskObservable.remove()
  .then(_ => {
    console.log('success');
    taskPerJobtypeObervable.remove()
      .then(_ => {
        return ture
      });
  })
  .catch(err => {console.log(err, 'You dont have access!'), return false});

}

As you see I need to chain the remove as a promise, which I really want to avoid. I want this to be observable pattern as why I use angularFire2. So instead of return a boolean, I want to return an observable. And I want this to be multi-location delete. How can I refactor this code? Thank you so much!

It seems to return a promise: https://github.com/angular/angularfire2/blob/c3a954cd857fc297438f53d3a1e3bf69b6af01c2/src/database/firebase_list_observable.ts#L42. You can also use a single multi-location `update()` call to delete them all in one call. https://firebase.googleblog.com/2015/09/introducing-multi-location-updates-and_86.html — Frank van Puffelen, Jan 18 '17 at 23:27
Thank you Frank for the quick common! yes, it return a promise with angularFire remove(). But since this is a multi-location "delete", if I chain this promise, it looks pretty ugly. I want to use the "multi-location update()" method you mentioned. But the link only have update example. How do I delete (I cannot use update to delete node right?!) I provided example to make this clear. — Hugh Hou, Jan 19 '17 at 01:26
It'll delete when you post null. Ah, but I see that you already found that out. :-) — Frank van Puffelen, Jan 19 '17 at 03:03

score 3 · Accepted Answer · edited Nov 16 '17 at 11:27

Thanks to Frank, I think I found the solution and share the solution here:

The idea is to use update() to both location to "null", and it will get rid of it in Firebase.

Here is the refactoring code:

deleteTask(taskId: string, jobtypeId: string): Observable<any> {

   let dataToDelete = {};
   dataToDelete['tasks/' + taskId] = null;
   dataToDelete['tasksPreJobtype/' + jobtypeId + '/' + taskId] = null;

   return this.firebaseUpdate(dataToDelete);
}

firebaseUpdate(dataToSave) {

   const subject = new Subject();

   this.sdkDb.update(dataToSave)
     .then(
       val => {
       subject.next(val);
       subject.complete();
     },
     err => {
      subject.error(err);
      subject.complete();
     }
   );

   return subject.asObservable();
}

With that, my component can easily subscribe to deleteTask and do redirect or other option only when deleteTask return true. The power of reactive programming VS promise :)

How to do a multi-location "remove" with AngularFire2 or Firebase in Angular2

1 Answers1