View video tutorial
ANGULAR Checkbox
ANGULAR
Checkboxes can be implemented using the ngModel Angular directive in a template-driven form.
Angular Checkbox Example
➔ This example shows how checkbox works in Angular in template driven form.
Create a project by ng new checkbox2 command.
ng new checkbox2
app.module.ts file
Copy this file content to the target file.
Example
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import {FormsModule} from '@angular/forms';
import { Checkbox2Component } from './checkbox2/checkbox2.component'
@NgModule({
declarations: [
AppComponent,
TestComponent,
Checkbox2Component
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Copy the code and try it out practically in your learning environment.
Class file
Copy this file content to the target file.
Example
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-checkbox2',
templateUrl: './checkbox2.component.html',
styleUrls: ['./checkbox2.component.css']
})
export class Checkbox2Component implements OnInit {
constructor() { }
ngOnInit(): void {
}
checkboxselected: any = {};
chkboxselected: any = [];
doSubmit(data: NgForm) {
this.chkboxselected.length = 0;
this.checkboxselected = data;
if (this.checkboxselected.html != "") {
this.chkboxselected.push("html");
}
if (this.checkboxselected.css != "") {
this.chkboxselected.push("css");
}
if (this.checkboxselected.html == "" && this.checkboxselected.css == "") {
console.log("You must select checkbox");
} else {
console.log(this.chkboxselected);
}
}
updateGen(e: any) {
//console.log(e.target.value);
}
}
Copy the code and try it out practically in your learning environment.
HTML file
Copy this file content to the target file.
Example
<form #basicform="ngForm" (ngSubmit)="doSubmit(basicform.value)">
<div class="form-group">
<label for="gender">Gender:</label>
<div>
<input id="html" type="checkbox" value="html" name="html" ngModel (change)="updateGen($event)">
<label for="html">HTML</label>
</div>
<div>
<input id="css" type="checkbox" value="css" name="css" ngModel (change)="updateGen($event)">
<label for="css">CSS</label>
</div>
</div>
<button class="btn btn-success" type="submit">Submit</button>
</form>
<div *ngIf='chkboxselected==""; else err'>
<p>
You must select checkbox
</p>
</div>
<ng-template #err>
Selected:
<span *ngFor="let c of chkboxselected">
{{ c }}
</span>
</ng-template>
Copy the code and try it out practically in your learning environment.