CODEWITHSUNDEEP
angularangular-material
Himanshu Yadav
Himanshu Yadav

Reputation: 13587

Angular 2: How to pass the router in md-list-item?

I am populating a list of object using md-nav-list. When user clicks on a md-list-item, I want to navigate to candidate-detail router and pass the candidate.id with it.

Not sure how to call the router on md-list-item.

  <md-nav-list *ngFor="let candidate of candidates">
    <md-list-item class="candidate-row">
      <div class="column2">
        <span class="name">{{candidate.name}},</span>
      </div>
    </md-list-item>
  </md-nav-list>

the router for candidate detail is
{path: 'candidate/:id', component: CandidateDetailsComponent}

Rest of the code can be found here https://github.com/himanshuy/hiringplus-ui/tree/page2

Upvotes: 1

Views: 3995

Answers (3)

Darshita
Darshita

Reputation: 746

You can pass id with routerLink as shown below : 

<md-list-item class="candidate-row" [routerLink]="['candidate',{id:candidate.id}]">
        ...
</md-list-item>

the router for candidate detail is 

 {path: 'candidate/:id', component: CandidateDetailsComponent}

Upvotes: 5

ironmanwaring
ironmanwaring

Reputation: 91

You can add the routerLink directive to the md-list-item components (or any other component):

<md-list-item class="candidate-row" [routerLink]="['candidate', candidate.id]">
    ...
</md-list-item>

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You could use routerLink directive to form URL

<a class="name" [routerLink]="['candidate', candidate.id]">
   {{candidate.name}},
</a>

Upvotes: 0

Related Questions