I have a table of orders..each table row represents an order entity and when the user clicks on a specific row, it should redirect to a new view with the details of the clicked order .These two components are not parent and child and I want to pass data about clicked order row to the navigated page.. I tried the following approach

 <tr *ngFor="let order of allOrders" routerLink="../orderdetails" [state]=”{data:order}”>
                <td>{{order.orderRef}}</td>
                <td>{{order.receiptRef}}</td>
                <td>{{order.customer}}</td>
                <td>{{order.orderDate}}</td>
                <td>{{order.salesMan}}</td>
                <td>{{order.total}}</td>
                <td>{{order.status}}</td>
                <td>{{order.session}}</td>
                <td>
                </td>
              </tr>

This causes view to navigate to Orderdetails

 ngOnInit(): void {
    console.log(history.state)
    console.log(history.state.data);
  }

Inside the ngOnInit() console.log(history.state) logs {navigationId: 1} but console.log(history.state.data) logs undefined.

Why am I getting undefined and not the data I set on the state ?

How can I access the data I passed in to the state property?

I have a table of orders..each table row represents an order entity and when the user clicks on a specific row, it should redirect to a new view with the details of the clicked order .These two components are not parent and child and I want to pass data about clicked order row to the navigated page.. I tried the following approach

 <tr *ngFor="let order of allOrders" routerLink="../orderdetails" [state]=”{data:order}”>
                <td>{{order.orderRef}}</td>
                <td>{{order.receiptRef}}</td>
                <td>{{order.customer}}</td>
                <td>{{order.orderDate}}</td>
                <td>{{order.salesMan}}</td>
                <td>{{order.total}}</td>
                <td>{{order.status}}</td>
                <td>{{order.session}}</td>
                <td>
                </td>
              </tr>

This causes view to navigate to Orderdetails

 ngOnInit(): void {
    console.log(history.state)
    console.log(history.state.data);
  }

Inside the ngOnInit() console.log(history.state) logs {navigationId: 1} but console.log(history.state.data) logs undefined.

Why am I getting undefined and not the data I set on the state ?

How can I access the data I passed in to the state property?

• javascript
• angular
• typescript

• Can u provide more code for the component which has history.state in it. I think you are not doing it right but I need to see entire code to help you fix it – Shashank Vivek Commented Feb 9, 2020 at 9:26
• @ShashankVivek history.state is browser's window object's field..I didn't define it .. I was following medium.com/ableneo/… – Arjun Commented Feb 9, 2020 at 9:38
• Can u try the updated answer and let me know – Shashank Vivek Commented Feb 9, 2020 at 9:43

2 Answers 2

Upon some research, I found that state doesnt work on non-anchor elements.

To solve the issue, On routing programatically we can use state:

orders.html

<tr *ngFor="let order of allOrders" (click)="onNavToOrderDetails(order)">
   <td>{{order.orderRef}}</td>
   <td>{{order.receiptRef}}</td>
   ....
</tr>

orders.ts

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

constructor(
   private router: Router
) {}

onNavToOrderDetails(order: Order) {
   this.router.navigate(['routetodetailscomponent'], { state: {data: order} });
}

orderDetails.ts

ngOnInit(): void {
   console.log(history.state)
   console.log(history.state.data);
}

I had the same problem. History.state was simply empty when i navigated to next component. The reason for that was that i accidentally executed a

_router.navigate([] {relativeTo: this._activatedRoute, queryParams: {search: searchqueryparams}, queryParamsHandling: 'merge'})

via a subscription in the constructor at pageload, which was there to persist any searchqueryparams to the url. It seems like the router.navigate overrides the old history state even when the component stays the same. So simply saving the old state before navigating again solved the issue for me.