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?

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

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 '20 at 09:12

Community

1
1

answered Feb 27 '17 at 20:35

Teddy Sterne

13,774
2
46
51

1

What is the import that I need to use to be able to implement OnInit? – Matt Fazzini Feb 27 '17 at 20:43
import {OnInit} from '@angular/core'; – Teddy Sterne Feb 27 '17 at 20:44
1

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 Feb 27 '17 at 21:00
1

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 Feb 27 '17 at 21:20
You could make recordName a property on your component and set it as `this.recordName = ...` or just all the API with the. And you received inside the subscription to the route params. – Teddy Sterne Feb 27 '17 at 21:33
1

Thank you, Teddy, I am forever in debt to you. – Matt Fazzini Feb 27 '17 at 21:43

score 4 · Answer 2 · answered Feb 27 '17 at 20:34

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 '17 at 20:34

hannes neukermans

12,017
7
37
56

score 0 · Answer 3 · edited Nov 24 '18 at 13:24

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 '18 at 13:24

Zoe

27,060
21
118
148

answered Nov 24 '18 at 11:08

Siddhu

1

Angular2 - Adding routerLink parameters to chosen table value

3 Answers3