How to generate different routerLinks from ngFor created items?

I'm using a ngFor (in a "list-component") to display several "item-component" and I want to send the user to a "item-detail-component" when he clicks on one of these items.

Problem is I'm still an early learner on Angular and I don't understand the logic behind those routerLinks that doesnt even exists in my mind.

I tried to get the "id" of my items with let i = index, but I don't know what to do with i after this step.

Can someone help me on this problem ? Thanks a lot !

liste-actus HTML

<div class="container list-group">
  <a *ngFor="let actu of actus | async; let i = index" class="list-group-item list-group-item-action flex-column align-items-start" routerLink="">
     <app-item-actus [actu]="actu"></app-item-actus>
  </a>
  <br>
</div>

liste-actus TS

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

import { ActuService } from 'src/app/services/actu.service';
import { Actu } from 'src/app/modeles/actu';

@Component({
    selector: 'app-liste-actus',
    templateUrl: './liste-actus.component.html',
    styleUrls: ['./liste-actus.component.css']
})

export class ListeActusComponent implements OnInit {

    actus: Observable<Actu[]>;

    constructor(private actuService: ActuService, private route: ActivatedRoute) { 
    }

    ngOnInit() {
        this.actus = this.actuService.getActusList();
    }

}

Solution

Everything seems fine besides routerLink and id parts.

Does your Actu class have an id property? If yes, then you can use actu.id in the routerLink.

So the a tag should look like this:

<a *ngFor="let actu of actus | async;" [routerLink]="['path/of/your/route', actu.id]"
 /*other stuff*/ 
>
     <app-item-actus [actu]="actu"></app-item-actus>
</a>

Please note that routerLink is in square brackets ([routerLink]). This way, you can bind variables to an attribute. If not, the value put in the attribute is just a string.

If you Actu class does not have an id property and you want to use index as id, then you should use it instead.

<a *ngFor="let actu of actus | async; let i = index" [routerLink]="['path/of/your/route', i]"
 /*other stuff*/ 
>
     <app-item-actus [actu]="actu"></app-item-actus>
</a>