I have very basic example here: /my-grid-application/my-grid-applicationponent.ts

In this ag-grid I want to print which column clicked and ordered in what way.To do that basically I found method sortChange(event) on official docs.But I couldn't find a way to implement this method.Here what I tried.

 sortChange(event){
      console.log(event);
    }

<div style="width: 200px;">
    <ag-grid-angular
     (sortChange)="sortChange($event)" 
     #agGrid style="width: 100%; height: 200px;" 
    class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

Unfortunately this didn't work.It prints nothing.Do you know how I can listen sort changes on each column with column name?

I have very basic example here: https://stackblitz.com/edit/angular-ag-grid-angular-cwvpic?file=app/my-grid-application/my-grid-application.component.ts

In this ag-grid I want to print which column clicked and ordered in what way.To do that basically I found method sortChange(event) on official docs.But I couldn't find a way to implement this method.Here what I tried.

 sortChange(event){
      console.log(event);
    }

<div style="width: 200px;">
    <ag-grid-angular
     (sortChange)="sortChange($event)" 
     #agGrid style="width: 100%; height: 200px;" 
    class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

Unfortunately this didn't work.It prints nothing.Do you know how I can listen sort changes on each column with column name?

• javascript
• angular
• typescript
• ag-grid

3 Answers 3

It is sortChanged and not sortChange (has a d).

Try:

  printSortStateToConsole() {
    const sortState = this.gridApi.getSortModel();
    if (sortState.length == 0) {
      console.log("No sort active");
    } else {
      console.log("State of sorting is:");
      for (var i = 0; i < sortState.length; i++) {
        const item = sortState[i];
        console.log(i + " = {colId: " + item.colId + ", sort: " + item.sort + "}");
      }
    }
  }

onGridReady(params: any) {
      this.gridApi = params.api;
 }

<div style="width: 200px;">
    <ag-grid-angular
       #agGrid style="width: 100%; height: 200px;" 
       class="ag-theme-fresh"
       (sortChanged)="printSortStateToConsole($event)"
       (gridReady)="onGridReady($event)"
       [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

Edit: Your code is good, but you have to populate this.gridApi when the grid is ready like that (checkout (gridReady) and onGridReady). I get what you want to be logged into the console this way.

HTML:

    <ag-grid-angular>
     ...
     (sortChanged)="onSortChanged($event)">
    </ag-grid-angular>

TS:

onSortChanged(event) {
    const sortedColumn = event.columnApi.getColumnState().find(col => Boolean(col.sort));
    console.log(sortedColumn, '>> col sort state <<');

  // here you can do the logic for the sorted column and direction

Example console log:

{
    "colId": "created_at",
    "width": 233,
    "hide": false,
    "pinned": null,
    "sort": "asc",
    "sortIndex": 0,
    "aggFunc": null,
    "rowGroup": false,
    "rowGroupIndex": null,
    "pivot": false,
    "pivotIndex": null,
    "flex": null
}

If you are using AgGridReact then you can use in the following way to listend the filter changes

<Grid onSortChanged={onSortChanged}/>

const onSortChanged = (params) => {
    params.columnApi.getColumnState().find(s => s.sort != null)
}