Get checked status on click event in angular Material

I have a angular element

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

Here onchange(which actually gives the status of checkout) is doing some other task and I want the status of checkbox(either checked or unchecked) on click event.

I already tried looking over the object created by click and it does not have click object inside, so how can I detect if the checkbox is checked or not.

Solution 1:

You can use

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

or

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

Solution 2:

With your (change)="showOptions($event)" you can simply get the status like this:

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

Solution 3:

Another solution can be, You can use template reference variable with checkbox and pass that variable to method parameter.

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

Here #checkbox reference hold all checkbox related properties(like value, checked etc.). checkbox.checked this will give current state of checkbox with true and false.

Solution 4:

Yes you can get the checked event using change function (change)="showOptions($event);

In Ts

showOptions(event){
 console.log(event.checked); //true or false
}

When Checkbox is false not checked

When Checkbox is true then its checked