Firebase Delete node array slow down the component rendering

Question

I have an Angular7 component that is connected to a Realtime Database in Firebase.

The componend is binded to an Array of structured items calles "signals" and each time a new item is added to the array, the component gets the updates.

All works properly.

The problem comes from when the array is cleared... In this case it seems that the realtime database deletes the arrays items one by one and for each item deleted, it continue to push the entire array to the component...

this is the code:

The binding part

ngOnInit() {

    this.db.list<RHSignal>('signals', ref => ref).valueChanges().subscribe(res => {      
      this.listSignal = res;
    })  
  }

the function who deletes the array

ClearSignals(){
    this.db.object('signals').remove();
    alert('Signals has been removed !!!');
  }

As you can see the "signal" node ( who can contains more than 200 structured items ) is removed with one command but the binding continue to send the data of each array item deleted.

This cause the page to become very slow or blocked.

I need a fast and better way to avoid this problem.

Thanks to support

Answer 1

Finally I found a solution:

After reading the official documentation through this link:

https://firebase.google.com/docs/database/web/read-and-write

I found out:

Delete data

The simplest way to delete data is to call remove() on a reference to the location of that data.

You can also delete by specifying null as the value for another write operation such as set() or update(). You can use this technique with update() to delete multiple children in a single API call.

So I changed the Clear method in this way:

  ClearSignals(){

    var updates = {};

    updates['/signals'] = {};

    this.db.database.ref().update(updates);
    alert('Signals has been removed !!!');
  }

Now its really fast !