How do I use data from the table element from which I came?

Question

I currently have a table of tasks, and I would like to be able to click on one of the tasks to bring me to a new page that shows me the history of all times that task has run. I need a way to pass the Name and ID of the task that I just clicked on into the new component that I'm trying to display. I have tried to follow the Routing tutorial on Angular, but I keep getting blank data, like nothing is actually being loaded. Here is the table, I have the link to the new route surrounded by comments

<ng-container>

  <table matSort (matSortChange)="sortData($event)">
    <tr>
      <th mat-sort-header="Task ID">Task ID</th>
      <th mat-sort-header="Name">Name</th>
      <th mat-sort-header="Description">Description</th>
      <th mat-sort-header="Command">Command</th>
      <th mat-header="Run">Run</th>
    </tr>

    <tr *ngFor="let analytic of sortedAnalytics">
      <td>
        <input type="checkbox" [(ngModel)]="analytic.selected">
        {{analytic.task_id}}
      </td>

      <!--THIS IS THE LINE WITH THE LINK-->
      <td> <a routerLink="/task-history" routerLinkActive="active">{{analytic.name}}</a></td>
      <!--THIS IS THE LINE WITH THE LINK-->


      <td>{{analytic.description}}</td>
      <td>{{analytic.command}}</td>
      <td class="run" style="color: dodgerblue; text-decoration: underline" (click)="log()">Run Task</td>

    </tr>
  </table>

<button (click)="deleteAnalytics()">Delete Selected</button>

</ng-container>

And here is my ngOnInit from my task-history component

ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.name = params['name']
      this.id = params['task_id']
      console.log(this.name, this.id)

    })
  }

The console.log shows "undefined undefined"

Let me know what I'm missing, thank you!

Does this answer your question? [How to pass query parameters with a routerLink](https://stackoverflow.com/questions/37880876/how-to-pass-query-parameters-with-a-routerlink) — TotallyNewb, Jul 29 '21 at 18:06

score 0 · Answer 1 · answered Jul 29 '21 at 18:19

HTML

Add a method to navigate to task-history component with query params

 <table >
      <tr>
        <th mat-sort-header="Task ID">Task ID</th>
        <th mat-sort-header="Name">Name</th>
        <th mat-sort-header="Description">Description</th>
        <th mat-sort-header="Command">Command</th>
        <th mat-header="Run">Run</th>
      </tr>
    
      <tr *ngFor="let analytic of sortedAnalytics">
        <td>
          <input type="checkbox" [(ngModel)]="analytic.selected">
          {{analytic.task_id}}
        </td>
    
        <!--THIS IS THE LINE WITH THE LINK-->
        <td> <a  routerLinkActive="active" (click)="loadComponent(analytic.name,analytic.task_id)">{{analytic.name}}</a></td>
        <!--THIS IS THE LINE WITH THE LINK-->
    
    
        <td>{{analytic.description}}</td>
        <td>{{analytic.command}}</td>
        <td class="run" style="color: dodgerblue; text-decoration: underline" (click)="log()">Run Task</td>
    
      </tr>
    </table>

TS

loadComponent(analytic_name: any, analytic_task_id: any): any {
    this.router.navigate(['/task-history'], {
      queryParams: {
        name: analytic_name,
        task_id: analytic_task_id,
      }
    });
  }

ngOnInit from my task-history component

ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.name = params.name
      this.id = params.task_id
      console.log(this.name, this.id)

    })
  }

How do I use data from the table element from which I came?

1 Answers1