Angular 8 - Routing not happend - Mat table row

Admin 1
Viewed 361

I don't know why my routing is not happened after clicking row. No error is showing. Path is changing in URL from "http://localhost:4200/vendor-list" to "http://localhost:4200/vendor-list/vendor" But the page is not changing.

vendorlist.component.html

<tr mat-header-row *matHeaderRowDef="ordersDisplayedColumns"></tr>
<tr (click)="displayData(row)" mat-row *matRowDef="let row; columns: ordersDisplayedColumns;"></tr>
</table>

vendorlist.component.ts

displayData(row)
  {
    console.log(row);
    this.router.navigate(["/vendor-list/vendor/"]);
  }

myrouting.module.ts

{path:'vendor-list',component:VendorlistComponent,
children:[
  {path:'vendor',component:VendorComponent, 
]},
angular-routing angular typescript
2 Answers

Route to a unique ID for each row using url parameters.

vendorlist.component.html

    <tr mat-header-row *matHeaderRowDef="ordersDisplayedColumns"></tr>
<tr (click)="displayData(row, i)" mat-row *matRowDef="let row; let index as i; columns: ordersDisplayedColumns;"></tr>
</table>

vendorlist.component.ts

displayData(row, id)
  {
    console.log(row);
    this.router.navigate([`/vendor-list/vendor/${id}`]);
  }

myrouting.module.ts

    {path:'vendor-list',component:VendorlistComponent,
children:[
  {path:'vendor/:id',component:VendorComponent, 
]},
user_95599160 
{path:'vendor-list',
 children:[
   {path:'vendor',component:VendorListComponent,canActivate:[AuthguardGuard]},
   {path:'vendor',component:VendorComponent,canActivate:[AuthguardGuard]}

 ]}

check this one please

user_120542290
Related