This is not a duplicate post as I've looked and cannot find anything with external status alterations. I've been on and off this topic searching for a few days now.

What I'm doing is the following.

I have the DataTable and a Map on my UI. The DataTable lists the data points that are on the Map.

I can select and multi select on the DataTable, which highlights the row on the data table and interacts with the map and plots highlighted data points just fine. The issue that I'm having is that when I use the map to select the DataTable does not reflect the selected row that goes with that data point on the map UNTIL I mouse over the DataTable which I'm assuming in the background triggers some sort of refresh. I don't have to click or do anything in the DataTable , it just automatically triggers itself and then shows all of the points that I selected within my map.

The variable that the html page binds to for [selected] is being properly called and its value is being set, it just does not reflect the highlights on the rows until the mouse enters the DataTable area. I don't have to click or do anything for it to trigger, it just does so on its own once the mouse enters the area.

Also, I have also tried to manually set the table selected value, e.g.

this.tableRef.selected = this.newRowSelection;

So my question is HOW DO I GET the DataTable to auto display when I make my external selection?

I don't want to DROP the table and Redraw the DataTable as I feel it would not create a good UX.

Appreciate any and all input on this.

=======================================================

Update: Wed 3/11/2020

So after more testing and debugging I can confirm that I am definitely setting the datatable.selected value to the [] of rows that should be selected.

However, again the rows do not highlight until I have moused over the datatable.

Anyone have any suggestions on how to get the datatable to just highlight automatically?

=======================================================

Hard to say for sure without a reproducible example, but I think that it's because you are updating the property outside of angular' scope, probably as a result of a click on the map that is not bound that angular way.

You can read about change detection here. Basically, angular triggers change detection for all components its know about, on browser events (mouse click, mouse hover, key events...), ajax calls and setTimeout and setTimeout.

If you update some component property without angular knowing it (e.g. by binding a click to your map withut using nangular's click handler), angular (and your data table) won't know about it and won't refresh until the next change detection (which is the mouse hover for the data table)

So if you make that kind of change outside of angular, you need to tell angular to run change detection again, using one of the 2 methods below.

Wrap your modifications in a setTimeout

setTimeout(()=> this.tableRef.selected = this.newRowSelection);

This will trigger change detection for the whole application

Notify angular explicitely to run change detection again

import {ChangeDetectorRef} from '@angular/core';
constructor(private cdr: ChangeDetectorRef) {}
//....
this.tableRef.selected = this.newRowSelection;
this.cdr.detectChanges();

Note that this will apply only to the component (and children) where you are calling this method from. So if your map and data table are in the same component, this should work straight away. Otherwise, you can propagate some event from the map component to the component containing the table to know when to call this method.

You could also directly execute your action inside angular's zone

import {NgZone} from '@angular/core';
constructor(private ngZone: NgZone) {}
//...
this.ngZone.run(() => this.tableRef.selected = this.newRowSelection);