Refreshing angular ag-grid data

Question

I have an ag-grid which is rendering table from a .json file and an external Quick filter that is searching through ag-grid on key input on the filter. After someone searches the search term is displayed in the form of angular material chip with a "X" sign to close the chip with remove function. I want to reload the ag-grid to its default state once someone cancel/close the chip and also to include multiple filters in it using the chip. Here is my sample code, but I'm struggling with setting it up.

Html-

<div class="container">
<mat-form-field class="demo-chip-list"  *ngIf="gridApi">              
<mat-chip-list #chipList>
<div style="width:100%; margin-left:10%;"><label><span class="search-button">Search Funds</span></label>. 
<input class="search-input"  
[ngModel]="filterText"




(ngModelChange)=
"gridApi.setQuickFilter
($event)"
[matChipInputFor]="chipList"

[matChipInputSeparatorKeyCodes]="separatorKeysCodes"                   
[matChipInputAddOnBlur]="addOnBlur"                     
(matChipInputTokenEnd)="add($event)" />. 
</div><br/><div style="width:100%; margin-left:10%;"><mat-chip *ngFor="let fruit of fruits" 
[selectable]="selectable" 

[removable]="removable" 
(click)="onGridReady(params)" 
(remove)="remove(fruit)">
           {{fruit.name}}
<mat-icon matChipRemove *ngIf="removable"  ><sup>x</sup></mat-icon></mat-chip></div></mat-chip-list>. 
</mat-form-field>
<div class="header" style="display:inline"></div><div> <ag-grid-angular 
  style="position:absolute;padding-left:5%; bottom:0px;width: 90%; height: 350px;" #agGrid  id="myGrid" class="ag-fresh" [columnDefs]="columnDefs" 
[animateRows]="true" 
[enableRangeSelection]="true" 
[enableSorting]="true" 
[enableFilter]="true" 
[pagination]="true" 
(gridReady)="onGridReady($event)">
  </ag-grid-angular></div></div>

Component-

  @Component({
  selector: 
  'app-funds-table',
  templateUrl: 
  './funds-table.component.html',
  styleUrls: 
  ['./funds-table.component.css']
  })

export class 
FundsTableComponent   
 implements     OnInit {

visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = true;

// Enter, comma
separatorKeysCodes = [ENTER, COMMA];

fruits = [
{ name: 'ABC' }

 ];
add(event: MatChipInputEvent): void 
{
let input = event.input;
let value = event.value;

// Add our fruit
if ((value || '').trim()) {
  this.fruits.push({ name: 
value.trim() });
}

// Reset the input value
if (input) {
  input.value = '';
}
}
remove(fruit: any): void {
let index = 
this.fruits.indexOf(fruit);

if (index >= 0) {
  this.fruits.splice(index, 1);
}
}
private gridApi;
private gridColumnApi;
private columnDefs;
   private filterText = "";
  ngOnInit() {}
 constructor(private http:           
 HttpClient ){
 this.columnDefs = [{headerName: 
 "Ticker", field: "Ticker"},
  {headerName: "Id", field: "Id"},
 {headerName: "Utilities", field: 
 "Utilities"}
];
}

onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = 
params.columnApi;

this.http.get



("/fundsData/fund_info.json". )
.subscribe
(data => 
{this.gridApi.setRowData(data);
});
}
}

Answer 1

According doc:

You can reset filter via direct api call api.setQuickFilter(''); - empty for reset filter