Check if checkbox is checked in ANGULAR 10

Question

Given this checkbox:

<input type="checkbox" name="sendemail">

How can I check if its checked or not in Angular 10?

I've found many examples but they look too complex just for checking a value.

Thanks.

You can find some idea from [Checkbox Two Way Data Binding](https://stackoverflow.com/a/40214714/3090685) — ttquang1063750, Oct 23 '20 at 03:58

score 10 · Accepted Answer · answered Oct 24 '20 at 07:02

You can use [(ngModel)] like this:

in HTML

<input id="checkbox" type="checkbox" name="sendemail" [(ngModel)]="isChecked">

in TS

public isChecked = true;

Here is a sample showing this approach.

Note: if you are using the input in a form you should add [ngModelOptions]="{standalone: true}"

score 4 · Answer 2 · answered Jan 17 '23 at 13:02

I see the answer was resolved but i have another solution, to check if checkbox is checked in your html you need to add the event (change) like this:

<input type="checkbox" name="sendemail" (change)="onChange($event)">

As you can see, we need to send the "$event", then in your ts file we need to create the method with the name onChange and we need to receive the event and with this you can get if the checkbox is checked or not:

onChange(event: Event): void {
 const isChecked: boolean = event.target['checked']; // or event.target.checked
}

I hope this can be useful for someone.

SaiSurya · Answer 3 · 2020-10-23T05:15:35.957

There are many ways to know weather a check box is checked or not you can use Reactive Form Control OR Template Driven Forms etc. But In your case I think you just want to check the checked property of a single checkbox then the easy way of doing that is to use template variable and access that in your ts file using View Child.

app.component.ts

import { Component, ViewChild } from '@angular/core';

 @ViewChild("mycheckbox") mycheckbox;
 isChecked(){
    //Check the Console for the Output Weather checkbox is checked or not
    console.log(this.mycheckbox.nativeElement.checked);
  }

app.component.html

    <input (change)="isChecked()" #mycheckbox type="checkbox" name="sendemail">

Note: It is not mandatory to use change event on the control if you want to check it when user clicks like continue etc then you can access #mycheckbox in that click method as shown in the isChecked() method

I don't agree with "the easy way", for me the "easy and angular way" is simply using [(ngModel)]. -Angular is made it two relation variables in ts with what you see in the .html-. NOTE: you can pass to the function as argument mycheckbox `(change)="isChecked(mycheckbox)"` and you needn't use ViewChild — Eliseo, Oct 23 '20 at 06:37
@Eliseo Yes I completely agree to use ngModel and also thank you so much for improving my answer. — SaiSurya, Oct 23 '20 at 11:18

score 1 · Answer 4 · edited Sep 05 '21 at 19:04

I know this is an old one but I hope it might be useful for someone else while trying to search for the same thing

1- create your onDelete method in your x.component.ts file

    public deleteWave(item: any) {
    
        const sub = this.wavesService.getUpdatedWaveInfo(item.WaveID).subscribe(x => {
          x.WaveName = item.WaveName;
          x.Deleted = true;
          this.cd.detectChanges();
    
          this.updateWaveSubscriber = this.wavesService.updateWave(x).subscribe(() => {
            this.cd.detectChanges();
          });
          sub.unsubscribe();
        });
      }
    
      public onDeleteWave(event, item): void {
        event.preventDefault();
        event.stopPropagation();
        this.deleteWave(item);
        this.cd.detectChanges();
      }

Add the method and to your x.component.html file

    <!-- Buttons -->
              <kendo-grid-column [width]="114">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="live-wave-col0">
                    <button class="grid-toolbar-button grid-toolbar-button-small" (click)="onEditBtnClick($event,dataItem)" title="Edit">
                      <i class="k-icon k-i-edit"></i>
                    </button>
                    <button style="margin:0 2px" class="grid-toolbar-button grid-toolbar-button-small" (click)="onGoFullscreenClick($event,dataItem)" title="Fullscreen">
                      <i class="k-icon k-i-full-screen"></i>
                    </button>
                    <button class="grid-toolbar-button grid-toolbar-button-small" title="Summary" (click)="onShowWaveSummaryClick($event,dataItem)">
                      <i class="k-icon k-i-preview"></i>
                    </button>
                    <button class="grid-toolbar-button grid-toolbar-button-small" [swal]="deleteSwal" title="Delete Wave">
                      <i class="k-icon k-i-delete"></i>
                    </button>
                  </div>
    
                  <!-- Delete Notification -->
                  <swal #deleteSwal
                        title="Are you sure?"
                        text={{messageRecordType}}
                        type="error"
                        confirmButtonText="Yes"
                        cancelButtonText="No"
                        confirmButtonClass="btn btn-primary"
                        cancelButtonClass="btn btn-outline-primary"
                        [showCancelButton]="true"
                        [focusCancel]="true"
                        (confirm)="onDeleteWave($event,dataItem)">
                  </swal>
                </ng-template>
              </kendo-grid-column>

Make sure that while using Swal it needs to be in the same context and the onDelete() method won't be added to the button directly but to the swal where the deletion will be confirmed after the modal popped out.

Check if checkbox is checked in ANGULAR 10

4 Answers4