Angular check if checkbox is check from inside a function/method

Question

I am using Angular 4 and on my template I have a checkbox and a div.

In my .ts file I have 2 functions.

// html
<input type="checkbox" class="custom-control-input" (change)="function2($event)">

<div (click)="function1()">some text here</div>

This I have the ts file

// .ts

function1() {
   // check if the checkbox is checked.      
}

function2(event) {
    // do something here
}

From function1 how can I check if the checkbox is checked or not?

Vega · Accepted Answer · 2017-08-20 13:19:20Z

8

One of the ways to get the value in function1() is to use template variable.

Then you can do the followings:

1. HTML

<input #input type="checkbox" class="custom-control-input" (change)="function2($event)">

Typescript

@ViewChild('input') private checkInput;
....
function1(){
  console.log(this.checkInput.checked? "it's checked": "it's not checked")
}

2. HTML

<input #input type="checkbox" class="custom-control-input" (change)="function2($event)">
<div (click)="function1(input)">some text here</div>

Typescript

function1(element){
      console.log(element.checked? "it's checked": "it's not checked")
 }

edited Aug 20, 2017 at 13:19

answered Aug 19, 2017 at 21:07

Vega

28.8k28 gold badges121 silver badges151 bronze badges

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

2 Comments

malifa Over a year ago

There's a reason why angular provides a direct way to handle forms. Actually it provides two ways (template driven forms and reactive forms) and don't forget about dynamically created forms. I suggest you actually use one of those in your answer. Your suggestion will be unrealistically or at least hard to maintain in bigger form components. How would your approach look with 30 form elements? or 100 dynamically created inputs?

Vega Over a year ago

@lexith, thank you! In may answer I said 'One way' in the meaning of 'one of the ways', I didn't mean to say The way. I will try to add your suggestion to my answer :)

Ashish Dhandharia · Accepted Answer · 2017-08-19 21:13:38Z

0

Add an Id attribute to the checkbox

 <input id='check1' type="checkbox" class="custom-control-input" (change)="function2($event)">

Then check the value in function1()

function1() {
  if(document.getElementById('check1').checked) {
       // do something here
  }

answered Aug 19, 2017 at 21:13

Ashish Dhandharia

3612 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular check if checkbox is check from inside a function/method

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related