I have a button to respond to filter function

<div class="col-md-1">
     <button (click)="applyFilter()" class="btn btn-primary"
     style="float: right;">Search</button>                     
</div>    


applyFilter() {
    this.gridApi.onFilterChanged();
}

isExternalFilterPresent(): boolean {
    return true;
}

doesExternalFilterPass(node: RowNode): boolean {
    return true;
}

constructor(private http: HttpClient, private _snackBar: MatSnackBar) {
    this.gridOptions = {
        editType: 'fullRow',
        columnDefs: this.columnDefs,
        pagination: true,
        animateRows: true,
        isExternalFilterPresent: this.isExternalFilterPresent.bind(this),
        doesExternalFilterPass: this.doesExternalFilterPass.bind(this),
    };
}

<ag-grid-angular style="width: 100%; height:600px;" class="ag-theme-alpine"
    [defaultColDef]="defaultColDef"
    rowSelection='single' [gridOptions]="gridOptions"
    (rowValueChanged)="onRowChanged($event)" (gridReady)="onGridReady($event)">
</ag-grid-angular>

very basic external filter implementation to ag-Grid

however when click the search button, the whole page direct to the previous page which is very weird and I am not able to debug.