Angular 7, without NgModel how to take the checkbox status (true / false)?

Question

In my Angular 7 application, I have the collection of the checkbox which comes inside the *ngFor without [(ngModel)]. Here, How can I take the checkbox status whether it is checked or not without using ngmodel.

I have tried $event, but it comes always true. Find the below my code and give any good solution without [(ngModel)].

<div *ngFor="let country of addedValue  | keyvalue;  let in = index; ">
          <div>
              <input type="checkbox" name="country{{in}}" (change)="selectTestAll(country.value, $event)">
            </div>
</div>

 selectTestAll(countryValue: any, event: any) {
    console.log(event); // HERE I NEED TO KNOW THAT CHECKBOX IS CHECKED OR NOT
 }

Answer 1

You can use the checked property. Accessing it via event.target . This is example is using object destructuring assignment to retrieve the checked from event.target :

selectTestAll(countryValue: any, event: any) {
  const { checked } = event.target;
  console.log(checked);
}

Here is an example in action.

Hopefully that helps!