Angular 6 - Routing not happend - Mat-table row

Question

I don't know why my routing has not happened.

so far

<table mat-table [dataSource]="searchResult_DS" class="mat-elevation-z8">
     <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
         <th mat-header-cell *matHeaderCellDef> {{column}} </th>
         <td mat-cell *matCellDef="let element" > {{element[column]}} </td>
     </ng-container>

     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
       [routerLink] = "['/show-this-user-page', row.custId]" 
       (click)=highlightSelectedRow(row) [ngClass]="{ 'bg-clr': row === selectedRow }">
     </tr>
</table>

right now, am having a table with the list of data. whenever the user selects particular row it should navigate to the next page

public highlightSelectedRow(row): void
{
    this.picked = row.custId; 

    // i can able get values from here
    //do i need to add below line here.?
    //this.router.navigate(['/show-this-user-page']);
}

routing.ts

const routes: Routes = [

  {
    path: 'Here-where-am-doingStuffes',
    canActivate: [AuthenticationGuard],
    component: Here-where-am-doingStuffes
    // this page landing with my mat-table- then am doing routing on row 
  },
  {
    path: 'sample route 1',
    canActivate: [AuthenticationGuard],
    component: sample-route-1
  },
  {
    path: 'sample route 1',
    canActivate: [AuthenticationGuard],
    component: sample-route-2
  },
  {
    path: 'second-main-data',
    loadChildren: '/some-other-module/someother-data.module#SecondMainModule'
  }
];

Error

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'td'. ("header-cell *matHeaderCellDef> {{column}} ][routerLink] = "['/show-this-user', element.email]"> {{element[column]}} "): ng:///AdminModule/searchUser.html@35:51 Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'td'. ("header-cell *matHeaderCellDef> {{column}} ][routerLink] = "['/show-this-user', element.email]"> {{element[column]}} "): ng:///AdminModule/searchUser.html@35:51

could someone tell me where should I've to change my code and what else needs to be added? it would so helpful if you share the working demo.

Answer 1

If you wanted to you could keep the click listener and the following function should set the route params and navigate. Would then take of the [routerlink] from the <tr>

controller

<tr mat-row *matRowDef="let row; columns: displayedColumns;"
  (click)=highlightSelectedRow(row) [ngClass]="{ 'bg-clr': row === selectedRow }">
</tr>

Ensure the path you are going to route to has been set up to accept a param like so. the /:id will let it accept one, change it to whatever your example needs to be. (I think this might be the issue).

{ path: 'home/:id', component: HomeViewComponent }

be sure to inject Router and import it.

import { Router } from '@angular/router';

export class exampleRouter {

    constructor( private router: Router) {}

    public highlightSelectedRow(row): void
    {
        this.picked = row.custId;
        this.router.navigate(['show-this-user-page, this.picked']);
    }
}

Template

I think you are missing an import in your module, should include routing module like so.

import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [ AppComponent],
  imports: [ 
    RouterModule, // important one, be sure to import
    BrowserModule,
    FormsModule,
    HttpModule 
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

And then in your template you should be able to have.

<tr mat-row *matRowDef="let row; columns: displayedColumns;" 
   [routerLink]="['show-this-user-page', row.custId]" 
   (click)=highlightSelectedRow(row) [ngClass]="{ 'bg-clr': row === selectedRow }">
</tr>

Answer 2

Solution for my scenario is achieved by using queryParams properly

parentFile.ts

 this._router.navigate(['/goto-this-useDetail'], {queryParams: {email : this.currentlychosen}});

targetFile.ts

this._route.queryParams.subscribe(p => {
      this._order = p.email;
        console.log(this._order);
    })

How to use queryParams properly - refere here