Угловая сетка не работает

У меня есть ag-grid, который отображает таблицу из файла .json, и поиск выполняется с помощью быстрого фильтра. Поисковый запрос отображается в виде угловой материальной фишки под фильтром.

Я изо всех сил пытаюсь перезагрузить ag-сетку до состояния по умолчанию, если мы закроем чип, который отображает результаты поиска, а также включим в него несколько фильтров с помощью чипа.

Вот мой пример кода, но я не могу его настроить.

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.ts:

import { Component, OnInit } from '@angular/core';
import {AgGridModule} from "ag-grid-angular";
import { GridOptions } from 'ag-grid/main';
import { HttpClient } from "@angular/common/http";
import {NgModel} from '@angular/forms';
import { MatChipInputEvent } from '@angular/material';
import {ENTER, COMMA} from '@angular/cdk/keycodes';
import "ag-grid-enterprise";
@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("./../assets/fundsData/fund_info.json").subscribe(data => {this.gridApi.setRowData(data);
});
}
}