Angular ngx-datatable link accountid to details page

Question

datatable for data table, this table have some static data with account number and other details this table row have a column with actions like view row and if i click on the button this show me a alert with details like below

 userdetails.component.ts

 rows: any = [
 {
  id: 0
  name: "Chao Lee",
  account: "112123100251",
  office: "Edinburgh",
  amount: "1000"
 },
 {
  id: 1
  name: "jan Lee",
  account: "112123100251",
  office: "Edinburgh",
  amount: "1000"
 }
]

this working fine but I wanted to show this data to a details page like if user click on the id from the table then this will go to details page with the id and show up details. I have done this like this

at component.html

 <ngx-datatable-column name="id" prop="id">
            <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
              <a class="btn" (click)="ViewDetails(row.id)">
                {{row.id}} <!-- or {{value}} -->
              </a>
            </ng-template>
 </ngx-datatable-column>

and

component.ts

  ViewDetails(valObj){
  this.router.navigate(['/user/details/',valObj.id,{queryParams: {id: 
 valObj.id}}]);
}

but this not going to the details, showing me an error

ERROR Error: The requested path contains 
undefined segment at index 1
at validateCommands (router.js:4403)
at Router.push../node_modules/@angular/router/fesm5/router.js.Router.navigate 
(router.js:4281)

Please help me to fix it

Answer 1

You are passing row.id

<a class="btn" (click)="ViewDetails(row.id)">

And then trying to access the id property of a number in ViewDetails

ViewDetails(valObj){ ----> this is an id (a number, not an object so you can't access valObj.id)
  this.router.navigate(['/user/details/',valObj.id,{queryParams: {id: 
 valObj.id}}]);
}

just change that "valObj" to "id" and instead of "valObj.id" just use "id"

rewrite your ViewDetails to

ViewDetails(id){
  this.router.navigate([`/user/details/${id}`);  // --> route param
}

EDIT

There are several ways to do this:

Route params approach:

In your routing.module.ts, write you user detail component route like this (if user is a parent route, it's ok as well, just write the:id param as a param of details):

{ path: 'user/details/:id', component: YourDetailsComponent }

Navigate with

ViewDetails(id){
  this.router.navigate([`/user/details`, id]); 
}

In your YourDetailsComponent component, inject ActivatedRoute:

private route: ActivatedRoute

and with

this.route.snapshot.paramMap.get('id')

you would be able to access the id

query params approach :

ViewDetails(id){
  this.router.navigate([`/user/details`, {queryParams: { id: id }}]); 
}

you wouldn't need to use:id in the route, and you could access the query param with:

this.route.snapshot.queryParamMap.get('id')