How to generate different routerLinks from ngFor created items?

Question

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();
    }

}

score 2 · Accepted Answer · answered Dec 22 '18 at 22:23

2

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>

answered Dec 22 '18 at 22:23

Harun Yilmaz

8,281
3
24
35

Thanks, this code is working with the syntax you just showed me ! I got another problem : I must use the properties of `actu` in `app-actu-detail`. It seems i can't send the information about actu to another component like I did with ``. I tried this ` ` But I get this error : ERROR TypeError: Cannot read property 'title' of undefined at Object.eval [as updateDirectives] – Alvard Dec 23 '18 at 11:45
I cannot say something since I don't know the content of `app-actu-detail` component or the interaction between components. Please share your code via stackblitz so that I can help you further. – Harun Yilmaz Dec 23 '18 at 12:43
You can find all the angular code of my project here https://stackblitz.com/github/Adopt1Projet/AdoptUnStage Doesnt seems to work on stackblitz but you can check everything from here :) The components we re talking about are in Router/PageActus. – Alvard Dec 23 '18 at 16:03
I will have a look at and try to figute it out. – Harun Yilmaz Dec 23 '18 at 16:16
I don't get why I can pass the same input to another component. I tried to assign it to another array and pass it to the component but still getting the same error. Tried to add the same Get method in the service with a different name but still that error. I must miss something. – Alvard Dec 24 '18 at 11:21
1

I created a new project [here](https://stackblitz.com/edit/actu-trial) with your code. I found 3 main issues. First, you should import with relative paths like `../../actu` instead of `src/app/actu`. Second, you could use type instead of `any` like `actus: any` vs `actus: Observable`. And I suggest you to convert http result to a type. Sending the untouched http response to component may lead unexpected behavior. – Harun Yilmaz Dec 24 '18 at 11:59
Ok thank you for all your support and your time, should help a lot for my project, took a big step further ! I'll try to find a way to get rid of this error (relative paths and type don't seem to be the problem here). – Alvard Dec 24 '18 at 17:11
Glad to help! Have an enjoyable journey of coding :) – Harun Yilmaz Dec 24 '18 at 17:16

How to generate different routerLinks from ngFor created items?

1 Answers1