I'm using angular. I have an input type"checkbox" and a button next to it. When clicking the button a method is called, abc(). I have to check whether checkbox is checked or not on the click of button.
app.component.html
<input type="checkbox" id="chckbx">
<button (click)="abc();" class="btn btn-success">Search </button>
app.component.ts-
abc(){}
Well a simple solution to your problem is to use simple two way binding manually
<input type="checkbox" [checked]="isChecked" (change)="isChecked = $event.target.checked" id="chckbx" style="width:30px;height:30px;" >
<button (click)="abc();" class="btn btn-success" style="height: 30px;padding: 0px 30px">Search </button>
//in your component use this code
isChecked = false;
abc() {
if (!this.isChecked) {
console.log('Checkbox cannot be unchecked...');
}
}
It will solve the problem. However I do recommend to learn two way data-binding
[(ngModel)]approach. But you have to import some modules properly to usengModel.
You can pass the reference of the checkbox in the click method. You need to use the #var template notation:
<input type="checkbox" id="chckbx" #chkbox>
<button (click)="abc(chkbox)" class="btn btn-success">Search</button>
abc(checkbox: HTMLInputElement) {
console.log(checkbox.checked);
}
<input type="checkbox"
[ngModel]="value"
(ngModelChange)="changeValue()"
id="chckbx">
<button (click)="abc();" class="btn btn-success">Search </button>
changeValue() : void {
this.value = !this.value;
}
abc() : void {
console.log(this.value);
}
Bind the checkbox value with ngModel. Then use it in the abc() function.
html:
<input type="checkbox" id="chckbx" style="width:30px;height:30px;" [(ngModel)]="checked" >
<p>
<button (click)="abc();" class="btn btn-success">Search </button>
</p>
app.component.ts:
checked: boolean = true;
abc(){
alert(this.checked);
}
