How to refresh the angular formArray that using as datasource in material table

Question

How to refresh the formArray in material table when we make new api call (Filtered data). If I click Filter data button, it should refresh and load new data from api. Currently its not refreshing material table and its adding new data into form array. How I can fix this?

Here is code: Demo

Current behaviour of table

Answer 1

Remove existing formArray by calling clear method on formArray. Then create a new FormArray then update the data source with new controls.

   onsubmit() {
     this.productArray.clear();
     this.formBuilder(this.sample2);
     this.tableDetails.data = this.productArray.controls;
   } 

Forked Working Example