In my component class, I have two methods, one for when a checkbox is checked, and one for when a checkbox is unchecked. how do I define this behavior in my template file? this is sort of a pseudo-code of what I expected to have functionality for, though after some time looking around the web I don't see any option like this and can't seem to understand how it should be done
<input type="checkbox" *when checked*="method1()" *when unchecked*="method2()">
how should I implement this?
You can achieve this as below :
in component.html :
<input type="checkbox" [(ngModel)]="isChecked" (change)="handleChange()" />
in component.ts :
handleChange() {
console.log(this.isChecked);
if (this.isChecked) {
this.checkedTrue();
} else {
this.checkedFalse();
}
}
checkedTrue() {
console.log('checked')
}
checkedFalse() {
console.log('unchecked')
}
here is the working demo : demo
two way binding. you can read here : malcoded.com/posts/angular-data-binding . you bind the Variable stored in ts file directly with dom element. Any change gets reflected in both the side.