typescript - Angular detectar si el checkbox está marcado desde el .ts

Estoy usando Angular 4 y tengo una casilla de verificación en mi componente en el archivo de plantilla HTML del componente:

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

En el archivo .ts de mi componente tengo esto que establece el valor en verdadero.

toggleEditable() {
    this.contentEditable = true;
}

Mi problema es que solo quiero que el valor cambie SI la casilla está marcada.

Así que se vería algo así:

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

¿Cómo puedo hacer esto?

Respuesta #1

Necesitas comprobar event.target.checked para resolver este problema. Así es como puedes lograrlo:

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

En el .ts de tu componente:

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