Angular2 - Adding routerLink parameters to chosen table value

Question

I have a routerLink attached to the lead value in a table I have created in the HTML of an angular2 component. Upon clicking that table value, I want the routerLink to not only send to the next component but also bring the chosen value to the next component.

Example of current code

<a [routerLink]="['/Records']" ><td> {{Member.Name}} <td></a>

I have the link so it is sending to the Records page, however how do I send the name to that component so that I can display the specific record that I am trying to display?

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

Add a route parameter to the url and then access that value using the ActivatedRoute.

Route Definition

{ path: "Records/:name", component: RecordsComponent }

Link

<a [routerLink]="['/Records', Member.Name]" ><td> {{Member.Name}} <td></a>

Get Value

@Component({
    ...
})
export class RecordsComponent implements OnInit {

    constructor(private _route: ActivatedRoute) { }

    ngOnInit(){
        this._route.params.subscribe((params) => {
        var recordName = params["name"];
        //load record data
   });
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 27, 2017 at 20:35

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Matt Fazzini Over a year ago

What is the import that I need to use to be able to implement OnInit?

Teddy Sterne Over a year ago

import {OnInit} from '@angular/core';

Matt Fazzini Over a year ago

I have correctly implement OnInit and am no longer getting an error, however, I am getting another error that says it cannot find the name ngOnInit.

Matt Fazzini Over a year ago

Yes that did it! Now just one more question: is there a way that I can use that recordName variable outside of the ngOnInIt function? (I am trying to send that name to an api call function in the same component)

Matt Fazzini Over a year ago

Thank you, Teddy, I am forever in debt to you.

|

hannes neukermans · Accepted Answer · 2017-02-27 20:34:58Z

4

define your route like this:

{ path: 'Records/:id', component: xxx }

declaratively:

<a [routerLink]="['/Records', Member.name]">{{ Member.name }}</a>

programmatically:

goToMemberDetails(name) {
   this.router.navigate(['/Records', name]);
 }

answered Feb 27, 2017 at 20:34

hannes neukermans

13.6k8 gold badges40 silver badges64 bronze badges

Comments

Zoe - Save the data dump · Accepted Answer · 2018-11-24 13:24:04Z

0

@Component({
    ...
})
export class RecordsComponent implements OnInit {

    constructor(private _route: ActivatedRoute) { }

    ngOnInit(){
        this._route.params.subscribe((params) => {
        var recordName = params["name"];
        //load record data
   });
}

edited Nov 24, 2018 at 13:24

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered Nov 24, 2018 at 11:08

Siddhu

1

Collectives™ on Stack Overflow

Angular2 - Adding routerLink parameters to chosen table value

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related