Angular - add new row to mat-table when using FormControlArray as dataSource

Question

Below is my stackblitz example where it shown all companies and their respective contacts. Iterating through each company and binding contacts to mat-table. So far it is working.

https://stackblitz.com/edit/angular-riepzk-2k5mcv?file=app%2Ftable-basic-example.html

But I need to add a new row to mat-table for their respective company. I have implemented logic to push the new contact to existing Form Array collection in addRow method. but it is not effecting on mat-table, but I able to see the updated contact in 'form.value'.

Here i have couple of questions

Since I am using formarray and binding each collection to mat-table, is this the right way of implementing the code when comparing with normal way of binding single dataSource to mat-table?
When binding single data source to mat-table, we used to initialize data source like dataSource = new MatTableDataSource() and then bind data to dataSource.data property in type script file and In .html page we update datasource to [dataSource] property of mat-table like mat-table [dataSource] = "datasource". But how it was the case of looping through the form array and binding data to [dataSource] property in html. Since the data is dynamic and we can not intialize the dataSource to MatTableDataSource directly in .ts file. (OR) please let me know if there is a way of implementation

1) you can use this kind of binding 2) with #table directive you can in your component access table properties with @ViewChild selector. With that, you can access this.table.datasource and change it's structure. — Vinko Vorih

Marshal Marshal · Accepted Answer · 2018-12-13T02:58:08

MatTable doesn't automatically re-render when using an array as the datasource... you need to call the renderRows() method on the table to update the table in the view.

Since the table optimizes for performance, it will not automatically check for changes to the data array. Instead, when objects are added, removed, or moved on the data array, you can trigger an update to the table's rendered rows by calling its renderRows() method.

https://material.angular.io/components/table/overview#1-write-your-mat-table-and-provide-data

Get QueryList with all MatTables in view

 @ViewChildren(MatTable) _matTables

Pass i to addRow()

 (click)="addRow(c.controls.contacts, i)

Accept i and call renderRows() in your addRow() method for the MatTable index your are adding a row to.

addRow(elem: FormArray, i) {
    console.log('add row');
    console.log(elem);

    elem.push(
      this.fb.group({
        id: [0],
        contactName: ['kris'],
        emailId: ['[email protected]'],
        adminAgent: [false],
        collateralAgent: [false],
        trusteeAgent: [false],
      })
    );
   this._matTables['_results'][i].renderRows()
  }

Stackblitz

https://stackblitz.com/edit/angular-riepzk-ztcclu?embed=1&file=app/table-basic-example.ts

Angular - add new row to mat-table when using FormControlArray as dataSource

2 Answers