How to pass id of object from table to next component?

In the table(table) i have loaded objects from API. When i click on “osavotjad” link i am redirected to another component where i want to load data from selected object. How can i pass id of object what is on the same line with a clicked link.

<div class="card-body fixed-content">
        <div *ngIf="futureEvents">
          <ul>
            <li *ngFor="let event of futureEvents">
              <span class="name">{{event.eventName}}</span>
              <span class="name">{{event.place}}</span>
              <span class="date">{{event.eventDate | date:'dd.MM.yyyy'}}</span>
              <span><a routerLink="/participants">Osavoitjad</a></span>
              <span (click)="delete(event.id)"><img src="assets/remove.svg" class="deleteBtn"></span>
            </li>
          </ul>
      </div>

Answer

There are many ways to do that. The easiest solution will be using the router param or query params.

[routerLink]=”[participants, event.id]” (this is using parameter)

Or you can use query param in similar way.