CODEWITHSUNDEEP
htmlangular
Asad
Asad

Reputation: 108

Checkbox checked state in Angular 10

I am using Angular 10. I have a checkbox in my html file. In my typescript file I want to see if the checkbox is checked or not and perform some action accordingly. Is there a way to get the checked state of the checkbox like true if it is checked and false otherwise? TIA.

Upvotes: 0

Views: 4154

Answers (4)

HKR
HKR

Reputation: 39

If you are not using Template Form or Reactive Form,

<input type="checkbox" (change)="changeEvent($event.target.checked)">

For Template Forms,

<input type="checkbox" [(ngModel)]='checked' (ngModelChange)="changeEvent()">

For reactive forms,

<input type="checkbox" formControlName='check'>

this.form.get('check').valueChanges
.subscribe((check)=> this.changeEvent())

Upvotes: 0

Pallavi
Pallavi

Reputation: 506

You can use change event to check the state

<input type="checkbox" (change)="onSelect($event.target.checked)">


onSelect(state:boolean) {
     console.log("Is Checked? ", state)
}

Upvotes: 1

Tony
Tony

Reputation: 910

you can use two-way binding like this

html

<input type="checkbox" [(ngModel)]="checked">

ts

checked = false;

Upvotes: 0

Nguyễn Minh Tuấn
Nguyễn Minh Tuấn

Reputation: 21

To my knowledge, we have two ways of checking the state of the checkbox:

  1. Use the library for angular, Ex: Material UI: https://material.angular.io/components/checkbox/examples or different libraries.
  2. Use two-way binding of angular [(ngModel)] ="checked" on the HTML template

Upvotes: 0

Related Questions