Search code examples
angularhtml-tableangular2-routingrouterlink

Angular2 - Adding routerLink parameters to chosen table value


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?


Solution

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