Today, We want to share with you How to bind to checkbox change/click event with Angular?.In this post we will show you Angular Checkbox Change Event Example, hear for angular input checkbox change event we will give you demo and example for implement.In this post, we will learn about call function on checkbox checked angular 6 with an example.

How to bind to checkbox change/click event with Angular?

There are the Following The simple About checkbox change event angular Full Information With Example and source code.

As I will cover this Post with live Working example to develop checkbox change event in angular 9, so the checkbox change event in angular is used for this example is following below.

Step 1: Import FormsModule

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Form with ngModel

src/app/app.component.html

Angularjs CheckBox Example - Pakainfo.com

Website:


{{web.name}}


Submit

Step 3: updated Ts File

src/app/app.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators, FormArray} from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

form: FormGroup;
bloglistList: any = [
{ id: 1, name: 'pakainfo.com' },
{ id: 2, name: 'infinityknow.com' },
{ id: 3, name: 'ministackoverflow.com' }
];

constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
bloglist: this.formBuilder.array([], [Validators.required])
})
}

onCheckboxChange(e) {
const bloglist: FormArray = this.form.get('bloglist') as FormArray;

if (e.target.checked) {
bloglist.push(new FormControl(e.target.value));
} else {
const index = bloglist.controls.findIndex(x => x.value === e.target.value);
bloglist.removeAt(index);
}
}

submit(){
console.log(this.form.value);
}

}

Example

To bind to the change/click event of a checkbox in Angular, you can use the (change) or (click) event binding syntax.

Here’s an example:

In this example, we use the (change) event binding syntax to bind the onCheckboxChange() method to the change event of the checkbox. The $event variable passed as a parameter to the method contains information about the event, such as the state of the checkbox.

Alternatively, you can use the (click) event binding syntax to bind a method to the click event of the checkbox:

In this example, we use the (click) event binding syntax to bind the onCheckboxClick() method to the click event of the checkbox. The $event variable passed as a parameter to the method contains information about the event, such as the state of the checkbox.

In your component, you can define the onCheckboxChange() or onCheckboxClick() method to handle the checkbox change/click event. Here’s an example of what the method could look like:

onCheckboxChange(event: any) {
  console.log('Checkbox state:', event.target.checked);
  // Perform additional logic here based on the checkbox state
}

In this example, we log the state of the checkbox to the console when it changes. You can replace this with your own logic based on the state of the checkbox.

Web Programming Tutorials Example with Demo

Read :

• Jobs
• Make Money
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about angular checkbox change event example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.