Angular 6 - Add new row in AG Grid

Question

I want to add a new element in AG Grid. I have a following model:

export class PersonModel {
  cars: CarModel[];
}

The AG Grid has as rowData the array Cars of my model. But this array is not Observable. Now I want to add a new car when I click a button:

<button type="button" (click)="onClickCreateCar()">

And in my viewmodel:

  onClickCreateCar() {
    var emptyCar = new CarModel();
    this.person.cars.push(emptyCar);
  }

I can not see the new row in the grid because the array Cars is not observable. It is ok because the property of a model should not be observable. How do you fix the problem?

My AG-Grid definition:

<ag-grid-angular class="ag-theme-fresh" *ngIf="person" style="height: 100%; width: 100%;" [gridOptions]="gridOptions" [rowData]="person.cars" [columnDefs]="columnDefs">

Answer 1

For insert a new row into ag-grid you shouldn't use the rowData directly it will create\override existing object and all states would be reset, and anyway, there is a method for it setRowData(rows)

But I'd recommend to use updateRowData(transaction):

updateRowData(transaction) Update row data into the grid. Pass a transaction object with lists for add, remove and update.

As example:

gridApi.updateRowData({add: newRows});