Búsqueda de sitios web

typescript - Obtener el estado marcado en el evento click en Angular Material

Tengo un elemento angular

<mat-checkbox class="btn-block" 
              labelPosition="before" 
              (change)="showOptions($event)" 
              (click)="makeJSON($event.checked,i,j,k)">
</mat-checkbox>

Aquí onchange (que en realidad da el estado del checkout) está haciendo alguna otra tarea y yo quiero el estado del checkbox (ya sea marcado o desmarcado) en el evento de clic.

Ya intenté revisar el objeto creado por click y no tiene un objeto click dentro, entonces ¿cómo puedo detectar si la casilla está marcada o no?

Respuesta #1

Puedes usar

(change)="showOptions($event)" 
(change)="makeJSON($event.checked,i,j,k)">

o

(change)="showOptions($event);makeJSON($event.checked,i,j,k)">

Respuesta #2

Con tu (change)="showOptions($event)" puedes obtener simplemente el estado así:

showOptions(event:MatCheckboxChange): void {
    console.log(event.checked);
}

Respuesta #3

Otra solución puede ser que puedes usar una variable de referencia de plantilla con la casilla de verificación y pasar esa variable como parámetro del método.

 <mat-checkbox #checkbox (change)='showOptions(checkbox.checked)' value=''>all</mat-checkbox>

Aquí #checkbox referencia contiene todas las propiedades relacionadas con la casilla de verificación (como valor, marcado, etc.). checkbox.checked esto dará el estado actual de la casilla de verificación con true y false.

Artículos relacionados