Highlight single Angular Material Table row based on BehvorSubject value

I have an Angular Google Map (AGM) component with several Markers and a Material Table (mat-table) that contains as many rows as there are Markers.

When an AGM marker is clicked, I set the currently active Data_file_id (which uniquely identifies each data row in the material table) in a Behaviour Subject.

I plan to make the Angular Material table subscribe to this Behaviour Subject and then highlight the one and only row that contains the Data_file_id with a different row colour. I can’t get it to work at the moment. This is what I currently have:

Snippet of the Service that holds the BehaviorSubject:

  private activeMarkerSubject: BehaviorSubject<number> = new BehaviorSubject(0);
activeMarker$= this.activeMarkerSubject.asObservable(); setActiveMarker(value: number) { this.activeMarkerSubject.next(value); } ...  This is the table snippet:  <!-- TABLE --> <div class="mat-elevation-z0 table-wrapper"> <table mat-table class="full-width-table" matSort aria-label="Elements"> <!-- Generic static columns that'll always be there--> <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns"> <th mat-header-cell *matHeaderCellDef> {{column | formatHeaderForOutput: question_lookup_table | removeUnderScore}} </th> <td mat-cell *matCellDef="let element"> {{element[column]}} </td> </ng-container> <!-- <ng-container cdkColumnDef="actions"> <th mat-header-cell *matHeaderCellDef></th> <td mat-cell *cdkCellDef="let row"> <button mat-raised-button color='accent'>Sections</button> </td> </ng-container> --> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="data-row-style" [ngClass]="{'highlight': selectedRowIndex == row.Data_File_Id}" ></tr> </table> <mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100, 250]" showFirstLastButtons> </mat-paginator> </div>  What I am planning to do is set the selectedRowIndex to be the new value of the BehaviorSubject when it gets set through a Marker click event: <!-- GOOGLE MAP--> <div class="mat-elevation-z4"> <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> <agm-marker *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng" (markerClick)="updateActiveMarker(m);"> <!-- <agm-info-window> <strong>Info Window content like address?</strong> </agm-info-window> --> </agm-marker> </agm-map> </div>  in the component containing the map: updateActiveMarker(marker) { console.log(marker); this.mapService.setActiveMarker(marker.datafileId); } ...  then in the component containing the table: ... this.subscription.add(this.mapService.activeMarker$.subscribe(m => {
console.log(the marker: \${m});
this.selectedRowIndex = m;
}))

....


Do note that the Map and Table are in separate components and they communicate via the BehaviorSubject. When the Marker on the map is clicked, the updates get emitted properly but I can’t get the table to acknowledge that a new value has arrived and set the css class highlight. Could anyone help me urgently, please? Thank You in advance.

Source: New feed
Source Url Highlight single Angular Material Table row based on BehvorSubject value