Angular detect If checked in .ts

Question

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

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

In my file .ts file. I have a value that sets to true.

toggleEditable() {
    this.contentEditable = true;
}

My problem is that I only need to change the value if the checkbox is checked.

So it looks something like this:

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

How can i do this?

Answer 1

You need to check event.target.checkedto solve this problem. Here's how you can achieve this:

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

In your .ts component:

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