Angular 6 - Add new row in AG Grid - 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});

Answer 2

for angular:
set id for html - selector (#agGrid in this example):
<ag-grid-angular
#agGrid
style="width: 650px; height: 500px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
and then define the viewchild with this id, import AgGridAngular like shown below, then you can use the ag-grid api in Angular
import {Component, OnInit, ViewChild} from '#angular/core';
import { AgGridAngular } from 'ag-grid-angular';
#Component({
selector: 'app-angular-handsometable',
templateUrl: './angular-handsometable.component.html',
styleUrls: ['./angular-handsometable.component.scss']
})
export class AngularHandsometableComponent implements OnInit {
#ViewChild('agGrid') agGrid: AgGridAngular;
columnDefs = [
{headerName: 'Make', field: 'make', sortable: true, filter: true, editable: true },
{headerName: 'Model', field: 'model', sortable: true, filter: true, editable: true },
{headerName: 'Price', field: 'price', sortable: true, filter: true, editable: true }
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 },
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 },
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 },
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
constructor() { }
ngOnInit() {
}
save() {
console.log( 'Save', this.rowData );
}
addRow() {
this.agGrid.api.updateRowData({
add: [{ make: '', model: '', price: 0 }]
});
}
}

Answer 3

Make sure your rowData array is getting updated with the new object you added and if its getting updated and its just a question of updating the grid view, you can explicitly call the refresh API's of the grid.
https://www.ag-grid.com/javascript-grid-api/#refresh

Answer 4

I visited ag-grid documentation and got rowData is simple array. If ag-grid not refreshing your dom then may be they want a fresh array. You can do like this:
this.person.cars = [this.person.cars.slice(0), yourNewCarObj];