0

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.

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
Nour
  • 23
  • 4
  • Look at the rendered HTML (always) - your onclick is rendered as a string: `"show_hide_row(order.orderId)"` but your id is rendered as the id ``. You're missing the `{{ }}` from the onclick order.orderId. – freedomn-m May 17 '22 at 16:54
  • Some *basic* debugging would also show you this. `function show_hide_row(row) { console.log(row) }` -> "order.orderId" – freedomn-m May 17 '22 at 16:55
  • @freedomn-m do you mean that I should add `{{ }}` like this `onclick="show_hide_row({{order.orderId}});"` ? This does not work. I have also tried to cover the whole method with those brackets and nothing happens. It says **Can't bind to 'onclick' since it isn't a known property of 'a'.** – Nour May 17 '22 at 17:07
  • Depends on what `order.orderId` is - I would guess it should be `onclick="show_hide_row('{{order.orderId}}');"` – freedomn-m May 17 '22 at 17:37
  • This looks relevant: https://stackoverflow.com/a/53935634/2181514 – freedomn-m May 17 '22 at 17:39
  • I am iterating over the List of orders I have. Therefore, the order is an object in that list. I would like to give the row (that should be expanded in case the user wants to see the related order items) the same custom Id as the one the order has to make it unique. – Nour May 17 '22 at 17:42
  • 1
    Just a quick question here: Is there a reason you aren't using Angular event binding? Meaning, `(click)="methodname()"` instead of `onclick="show_hide_row(order.orderId);"`? Also, what's with the vanilla Javascript? – Meqwz May 17 '22 at 17:45
  • @Meqwz I tried to use Angular event binding but with this usage, I am unable to access the JS code. It always complains that the JS method namely the `show_hide_row` does not exist on type 'MyordersComponent' which is the Angular component. I am not exactly sure why this is the case here. – Nour May 17 '22 at 17:50
  • 1
    Also relevant: https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1 – freedomn-m May 17 '22 at 17:57

1 Answers1

1

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.

Nour
  • 23
  • 4
  • Hey, if you're happy, I'm happy. Glad it works! However, this is not the Angular way to solve this problem. If you would like more info, please create a StackBlitz and I will show you. – Meqwz May 17 '22 at 21:01