Angular 9/8 Material Checkbox Examples

Today, We want to share with you Angular 9/8 Material Checkbox Examples.In this post we will show you How to Create a Checkbox in Angular8?, hear for Angular 9/8 Material Create a Checkbox we will give you demo and example for implement.In this post, we will learn about Angular 9/8 Material Examples: Date Picker, Input, CheckBox, Radio Button and Select with an example.

Angular 9/8 Material Checkbox Examples

There are the Following The simple About angular 6 reactive forms checkbox array Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular 9/8 Checkbox Tutorial, so the Angular 9/8 Checkbox Tutorial is used for this example is following below.

Also Read This ๐Ÿ‘‰   Asp.Net Clear all controls value reset

Phase 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 { }

Phase 2: Form with ngModel

src/app/app.component.html

<div class="bdy-cart container dsp">
    <h1>Angular CheckBox Example - pakainfo.com</h1>
        
    <form [formGroup]="form" (ngSubmit)="submit()">
            
        <div class="corona form-group lg10">
            <label for="blogspot">Blogspot:</label>
            <div *ngFor="let web of blogspotList">
              <label>
                <input type="checkbox" [value]="web.id" (change)="onCheckboxChange($event)" />
                {{web.name}}
              </label>
            </div>
        </div>
        
        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

Free Live Chat for Any Issue

Phase 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;
  blogspotList: any = [
    { id: 1, name: 'pakainfo.com' },
    { id: 2, name: 'ministackoverflow.com' },
    { id: 3, name: 'NiceSnippets.com' }
  ];
  
  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      blogspot: this.formBuilder.array([], [Validators.required])
    })
  }
    
  onCheckboxChange(e) {
    const blogspot: FormArray = this.form.get('blogspot') as FormArray;
  
    if (e.target.checked) {
      blogspot.push(new FormControl(e.target.value));
    } else {
       const index = blogspot.controls.findIndex(x => x.value === e.target.value);
       blogspot.removeAt(index);
    }
  }
    
  submit(){
    console.log(this.form.value);
  }
    
}

Web Programming Tutorials Example with Demo

Read :

Also Read This ๐Ÿ‘‰   Angular 9/8 Material Textarea Examples

Summary

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

I hope you get an idea about Angular 9/8 Checkbox Tutorial.
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.