Angular Material Table in Electron – Not Updating a Cell Until Alt-Tabbing

I have an Angular Material Table running in Electron. I add a row to the table, and it appears automatically as expected. I send data from this row to the main process to do some “long running processing.” When this is done, it publishes data back to the renderer process where the table is running. In the listener, I locate the record by its ID and update it, but the table doesn’t visually update… until I click on another window like the developer console or even the same BrowserWindow.

I’ve set up the backing data source for the Material Table using a rxjs Subject, which I call .next() on whenever the table data updates.

Here is my component, with a button that adds a row followed by the table definition:

<div>
  <button mat-button (click)="add()">Add Example</button>
</div>
<div>
  <mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.firstName }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.lastName }}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>
</div>

The add() method just calls a service with the code below. It just adds the value to the array and sends data to the main process:

  public addExample(example: Example) {
    const currentValue = this.subject.value;
    const newValue = [...currentValue, example];
    this.subject.next(newValue);

    this.electronService.ipcRenderer.send('new-example', example);
  }

On the main thread, I have a listener that modifies the data a little bit and sends it back a short while later:

ipcMain.on('new-example', (e, data) => {
  console.log('got data', data);
  const firstName = data['firstName'];

  // simulate long running task
  setTimeout(() => {
    const newFirstName = firstName + ' Jr';

    console.log('sending back data', newFirstName);
    mainWindow.webContents.send(
      'new-example-response',
      {
        id: data['id'],
        firstName: newFirstName
      }
    );
  }, 3000);
});

Back on the renderer process I have a listener that locates the element and modifies it. I create:

    this.electronService.ipcRenderer.on('new-example-response', (event, data) => {
      console.log('received data', data);

      const valueList = this.subject.value;
      const entryToUpdate = valueList.find(x => x.id === data.id);
      entryToUpdate.firstName = data.firstName;

      const newList = [...valueList];
      this.subject.next(newList);
    });

My DataSource is defined as such:

export class MyDataSource extends DataSource<Example> {
  constructor(private exampleService: ExampleService) {
    super();
  }

  connect(collectionViewer: CollectionViewer): Observable<Example[] | ReadonlyArray<Example>> {
    return this.exampleService.getExamples();
  }

  disconnect(collectionViewer: CollectionViewer): void {
    this.exampleService.getExamples().unsubscribe();
  }
}

where this.exampleService.getExamples() returns the BehaviorSubject.

I created a GitHub project to help anyone willing to provide assistance: https://github.com/skalleywagg/AngularMaterialTableNotUpdating

Thanks in advance.

Source: New feed
Source Url Angular Material Table in Electron – Not Updating a Cell Until Alt-Tabbing