I have a table in an HTML file used in an Angular application. I need to retrieve the user orders and list the orders in the table. if the user clicks on the Review button, I want the user to be able to see the related order items for this specific order. The review button should expand a new row containing the related order items. How to achieve this programmatically? I have tried passing the order id as the id of the row but unfortunately, this does not work.
<script type="text/javascript">
function show_hide_row(row) {
$("#" + row).toggle();
}
</script>
<table class="table" cellpadding=10>
<caption>The total amount of orders is {{orders.length}}</caption>
<tbody *ngFor="let order of orders" >
<td>
<a class="link" style="font-weight: bold; cursor: pointer;" onclick="show_hide_row(order.orderId);">Review</a>
</td>
</tr>
<tr id="{{order.orderId}}" class="hidden_row">
<p>Here comes the related order items for the expanded order</p>
</tr>
</tbody>
</table>
Any help would be much appreciated! Thanks.
I have solved this issue by following those steps:
1- I have created a JS file in the assets/js folder 2- I have added the above function to the JS file. 3- I have added the file to the angular.json file
"scripts": ["src/assets/js/common.js"]
4- run the command
ng serve
5- In the component module ts file I have declared a function that matches the name of the function in the JS file
declare function show_hide_row(row: any): any;
6- I have created a public function with the same name, this will be used in the HTML file to call the JS function
public show_hide_row(row: any): void {
show_hide_row(row);
}
7- I have tested the function by adding
function show_hide_row(row) {
$("#" + row).toggle();
**console.log(row);**
}
8- in the HTML file I am using Angular event binding:
(click)="this.show_hide_row(order.orderId)"
9- Testing it with the browser, it works and I am able to see the custom id of the row.