Angular detect If checkbox is checked from the .ts

Question

I am using Angular 4 and I have a checkbox on my component on the component's html template file:

<input type="checkbox" (change)="canBeEditable($event)">

On my component's .ts file I have this which set's the value to true.

toggleEditable() {
    this.contentEditable = true;
}

My problem is that I only want the value changed IF the checkbox IS checked.

So it would look something like:

toggleEditable() {
    if (checkbox is checked) {
      this.contentEditable = true;
    }
}

How can I do this?

Possible duplicate of Check if checkbox element is checked in TypeScript — marcusshep
– marcusshep, Commented Aug 18, 2017 at 18:19
That doesn't work on my app. HTMLInputElement is not a type it knows — user8398743
– user8398743, Commented Aug 18, 2017 at 18:30

FAISAL · Accepted Answer · 2017-08-18 18:44:37Z

51

You need to check event.target.checked to solve this issue. This is how you can achieve that:

<input type="checkbox" (change)="toggleEditable($event)">

In your component's .ts:

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

answered Aug 18, 2017 at 18:44

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

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

5 Comments

Alkarin Over a year ago

Is there a way to do this for radio buttons as well? event.target.checked always results as true after the radio button has been clicked once.

nikhil Over a year ago

What would be type of 'event' in this case? if i use typescript.

aRtoo Over a year ago

@nikhil do you have an answer for this?

Gregoire Ducharme Over a year ago

Just do event.checked in typescript (you can print the variable event to see what field it contains, this would have easily give you the answer :) )

mcalex Over a year ago

umm, it's a toggle. Why not just: html - <input ... (change)="toggleEditable()">, ts - toggleEditable() { this.editable = !this.editable; }

Collectives™ on Stack Overflow

Angular detect If checkbox is checked from the .ts

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related