How to call a function on checking a checkbox in angular 2.0

Question

I am currently using angular 2.0. In HTML, I have a checkbox, the code is as mentioned below.

<div style="margin-left:15px;">
            <label>Draw</label>
            <input id="isCheckBox" type="checkbox" checked="checked">
</div>

How to call a function only if a checkbox is checked in typescript file?

Sajeetharan · Accepted Answer · 2017-03-08 18:20:56Z

31

You can do this,

<input type="checkbox"  id="isCheckBox" (change)="yourfunc($event)"/>

and in typescript,

yourfunc(e) {
   if(e.target.checked){        
   }
}

answered Mar 8, 2017 at 18:20

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Soukaina EL HAYOUNI Over a year ago

Hello, I use the same thing, but I got this error : "Cannot read property 'checked' of undefined"

ADARSH K Over a year ago

@SoukainaElHayouni Make the code as below, it will work. yourfunc(e) { if(e.checked){ } } please remove the target property from the code.It worked for me.

Soukaina EL HAYOUNI Over a year ago

@ADARSHK Thank you for your reply! I solved the problem.

Pradeep Kumar Das · Accepted Answer · 2021-04-02 03:49:05Z

1

You can use currentTarget if target won't work,

<input type="checkbox"  id="isCheckBox" (change)="yourfunc($event)"/>

and in typescript,

yourfunc(e) {
   if(e.currentTarget.checked){        
   }
}

answered Apr 2, 2021 at 3:49

Pradeep Kumar Das

8919 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to call a function on checking a checkbox in angular 2.0

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related