can you please tell me a way to get checkbox value in angular 2
here is my code
https://stackblitz.com/edit/angular-grtvc7?file=src%2Fapp%2Fapp.module.ts
one way I know how to do that using the template variable like this
<mat-checkbox #ch>Check me!</mat-checkbox>
checkCheckBoxvalue(ele){
console.log(ele.checked)
}
I want to know another way to achieve this functionality
you need to use change event
<mat-checkbox (change)="checkCheckBoxvalue($event)">Check me!</mat-checkbox>
checkCheckBoxvalue(event){
console.log(event.checked)
}
You can use two way data binding for the same like mentioned below -
<input type="checkbox" name="myData" [(ngModel)]="isChecked">
You can use a local variable as well and fetch the value in controller side like below -
<input type="checkbox" name="myData" #myCheckbox>
@ViewChild('myCheckbox') myCheckbox;
console.log(myCheckbox, 'Value of checkbox');
Other way is you can use formControl for the same, either it can be model-driven form or template-driven form.
bind an [ngModel] to the checkbox
<input type="checkbox" name="checkbox" [(ngModel)]="isChecked">
const isChecked : boolean;
You can use ngModel as you already have imported FormsModule. Thats the recommended way.
Check my stackblitz
Here is some code also
<mat-checkbox [(ngModel)]="checkBoxValue" [ngModelOptions]="{standalone: true}">Check me!</mat-checkbox>
<button (click)="checkCheckBoxvalue()">check check box value</button>
checkBoxValue: any = false;
checkCheckBoxvalue(){
console.log(this.checkBoxValue)
}
No need to use (change) or component const
//template
<input type="checkbox" (click)="doAction($event)">
//component
doAction(event:any){
console.log(event.target.checked)
}
Using Template-Driven Form
1. Creating Checkbox
We need to use ngModel as an attribute in checkbox so that they can be registered with NgForm directive.
Create checkbox:
<input type="checkbox" name="tc" ngModel>
2. Fetch Value on Form Submit
When we submit the form and suppose the form value is stored in the instance of NgForm as form then we can fetch checkbox value using form.controls[...] as given below.
this.user.isTCAccepted = form.controls['tc'].value;
You can get the state of a mat-checkbox directly inside your template like following, e.g. to conditionally display a form-control based on state of checkbox:
<mat-checkbox
#checkbox
formControlName="hybridPlugin"
>Checkbox
</mat-checkbox>
<mat-form-field *ngIf="checkbox.checked">
// ...
</mat-form-field>
This works by using template variable #checkbox.
as you already have a local reference #c you can use it on the component ts file when needed
import {ViewChild} from '@angular/core';
@ViewChild('c') checkbox;
// when needed
//this.checkbox.value
you can call it on form submit or on change event of the checkbox itself.
