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