I'm working with a table of orders. Each row in the table represents an order entity, and I want to redirect the user to a new view with the details of the clicked order when they click on a specific row. The two components are not parent and child elements, so I need to find a way to pass data about the clicked order row to the navigated page. I attempted 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 results in the view navigating to Orderdetails.
ngOnInit(): void {
console.log(history.state)
console.log(history.state.data);
}
Upon checking inside the ngOnInit() function, console.log(history.state) shows {navigationId: 1}, while console.log(history.state.data) returns undefined.
Why am I only seeing undefined instead of the data I set for the state property?
How can I retrieve and access the data that I passed into the state property?