Q:

Angular ag-grid quick filter and angular material chips input clubbing into one

I have my code below which is pulling ag-grid on a table and a quick filter that is searching through the content.  Can we display the search terms we enter in Input box in the form of chips by using angular material chips.  Here is my code below- 
HTML: Here is the HTML code which currently has two input one for quick filter other for displaying chips, I want to combine these two inputs into one and display the entered text as chips which will search in the grid displayed below
<div class="search-box"  *ngIf="gridApi"><p>Search</p><span class="search-button"><label>Search funds:</label></span>
    <input class="search-input"  [ngModel]="filterText" (ngModelChange)="gridApi.setQuickFilter($event)" placeholder="Filter Table..."/>
  </div>

  <mat-form-field class="demo-chip-list">
    <mat-chip-list #chipList>
      <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
               [removable]="removable" (remove)="remove(fruit)">
        {{fruit.name}}
        <mat-icon matChipRemove *ngIf="removable"><sup>x</sup></mat-icon>
      </mat-chip>
      <input 
             [matChipInputFor]="chipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
             [matChipInputAddOnBlur]="addOnBlur"
             (matChipInputTokenEnd)="add($event)" />
    </mat-chip-list>
  </mat-form-field>

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

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

  fruits = [
    { name: 'Lemon' },
    { name: 'Lime' },
    { name: 'Apple' },
  ];

  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 = "";

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

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

A:

I think you want to blend the two implementations.  

    <mat-form-field class="demo-chip-list" class`enter code here`="search-box" *ngIf="gridApi">
                
        <mat-chip-list #chipList>
                  <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
                           [removable]="removable" (remove)="remove(fruit)">
                    {{fruit.name}}
                    <mat-icon matChipRemove *ngIf="removable"><sup>x</sup></mat-icon>
                  </mat-chip>
                  <input class="search-input"  
                         [ngModel]="filterText" 
                         (ngModelChange)="gridApi.setQuickFilter($event)" 
                         placeholder="Filter Table..."/
                         [matChipInputFor]="chipList"
                         [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                         [matChipInputAddOnBlur]="addOnBlur"
                         (matChipInputTokenEnd)="add($event)" />
         </mat-chip-list>
     </mat-form-field

However you will see that mat-form-field it will automatically add material look and feel. 
If you want different look and feel than that, you may want to play in inspect element afterwards and do ::ng-deep on material css classes and style it yourself.