Subscribing to Activate Route Paramaters having no effect on ngClaas

Question

Hi all I am currently implementing a sidebar component in which the user will be able to select from list of different items, loading different results,

I am currently using routing parameters to achieve this, essentially feeding the id to the backend to fetch new results

    <div
      class="organisation-item"
      *ngFor="let item of emailDocumentData"
      (click)="navigateToEmailDocument(item.pk)"
      [ngClass]="{'selected-item': item.pk === emailContentIDTest}"
    >
      <span [class.show]="!isCollapsed" class="text-hide item-text">{{
        item.name
      }}</span>
      <span [class.show]="isCollapsed" class="text-hide plus sliced-text">{{
        item.name | slice: 0 : 4
      }}</span>
    </div>

What I would like to happen here, is when the routing param of emailContentID is the same as the item.pk 'selected-item' is added a CSS class.

Here is my navigation function

  navigateToEmailDocument(pk: number): void {
    this.router.navigate([pk], { relativeTo: this.activatedRoute });
  }

Here is ngOnit

  ngOnInit(): void {
    // param highlight of selected item not working yet
    this.activatedRoute.params.subscribe((params) => {
      this.emailContentID = params["id"];
    });
  }

for some reason this does not occur quickly enough, my ngClass does apply when navigating and updating routing params.