title: Angular 5 - Ag grid add row
body: <p>I am trying to add a new row in "Ag grid".</p>
  
  <p>I save it well in the database, the problem is that visually the row is added to the "Ag grid" but it display empty.</p>
  
  <p>This is the code for the click event and to add the row.</p>
  
  <pre><code>this.gridOptions.api.updateRowData({ add: [form.form.value] });
  </code></pre>
  
  <p>This is the variable "gridOptions":</p>
  
  <pre><code>this.gridOptions = {
      context: { componentParent: this },
      defaultColDef: {
          resizable: true,
      },
      rowSelection: 'multiple'
  };
  </code></pre>
  
  <p>The object "form.form.value" contains the following:</p>
  
  <pre><code>{CodPersona: "001", Nombre: "John", Descripcion: "John", Fecha: "2020-04-07"}
  </code></pre>
  
  <p>This is the html code of the "Ag grid":</p>
  
  <pre><code>&lt;ag-grid-angular class="ag-theme-material"
     [rowData]="rowData"
     [columnDefs]="columnDefs"
     [gridOptions]="gridOptions"
  &gt;&lt;/ag-grid-angular&gt;
  </code></pre>
  
  <p>The database table contains the following fields:</p>
  
  <pre><code>IdPersona, CodPersona, Nombre, Descripcion, Fecha
  </code></pre>
  
  <p>This is a screenshot of the result in the browser:</p>
  
  <p><a href="https://i.stack.imgur.com/xHYrI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xHYrI.png" alt="enter image description here"></a></p>
  
  <p>NOTE: rowData I load it in the event "ngInit" using a service, thanks.</p>