ag-grid-angular doesn't display data

Question

Data fetched and assigned to an array is not displayed in ag-grid-angular component:

Angular component:

columnDefs = [
    { headerName: 'Id', field: 'id' },
    { headerName: 'Name', field: 'name' },
    { headerName: 'Login', field: 'login' },
    { headerName: 'Email', field: 'email' },
    { headerName: 'Role', field: 'role' },
    { headerName: 'Department', field: 'department' },
  ];

  rowData = Array();

  ngOnInit(): void {
    this.apiService.getAllUsers().subscribe(users => {
      users.forEach(user => {
        const item = {
          'id': user.id,
          'name': user.name,
          'login': user.login,
          'email': user.email,
          'role': user.role,
          'department': user.department
        };
        this.rowData.push(item)
      }, err => {
        this.errorMessage = err;
      })
    });

    console.log(this.rowData);
  }

Html:

<ag-grid-angular
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  class = "ag-theme-balham standard-grid">
</ag-grid-angular>

grid:

Array data printed in console:

Besides it, there are no other errors

Answer 1

This happens because you are pushing the items to the rowData variable, where this won't trigger the change detection, therefore you won't get the results in the grid.

What you can do is either have another separate array and push the items to that array and then assign that array to rowData variable. Or you can use the ag grid api method setRowData to set the results.