CODEWITHSUNDEEP
angulartypescript
kashif sohail
kashif sohail

Reputation: 19

How to toggle class in parent (tr) when checkbox is checked in angular 12

I want to toggle class in tr when checkbox is checked. I am trying to learn angular pls guide me as a easiest way.

<tr class="unchecked_checkbox">
   <td>
      <div class="form-check">
         <input class="form-check-input" type="checkbox" value="two" id="flexCheckDefault" />
         <label class="form-check-label" for="flexCheckDefault" />
      </div>
   </td>
</tr>

Upvotes: 1

Views: 684

Answers (1)

V&#237;tor Fran&#231;a
V&#237;tor Fran&#231;a

Reputation: 767

You can use the ngClass, which allows you to have conditional classes over the element. So you just need to make the element look to the value that is going to be changed when the checkbox is marked.

Example:

<tr [ngClass]="{unchecked_checkbox: !two, checked_checkbox: two}">
  <td>
      <div class="form-check">
          <input class="form-check-input" type="checkbox" value="two" id="flexCheckDefault" />
          <label class="form-check-label" for="flexCheckDefault">
          </label>
      </div>
  </td>
</tr>

Upvotes: 1

Related Questions