Search code examples
javascripthtmlangulartypescriptngfor

Assign custom values to ID and FOR properties of the checkbox and label resulted from ngFor loop to populate list

My problem is two-fold:

  1. I need to assign to each checkbox and label for checkbox unique ID and FOR value so each label corresponds to its according checkbox.
  2. Finally I need to capture which fields have been checked (I'm thinking somehow in a map, key being the country and value true/false) and create an SQL query which I can then send to the backend to retrieve the filtered result.

enter image description here

enter image description here

Solution

  • Here is the answer for unique ID and FOR value. enter image description here

    And here is how I capture the checked items and use them in a query: enter image description here

    What I did was capture the check/uncheck and the name of the country in the countryNameAndCheckBoxStatus method inside the HTML component. Process these in an array inside the angular component and return the array so it can be processed further down the road into an sql query.