I have an HTML like this for checkbox and my function
<mat-checkbox
[checked]="uncheckrx"
(change)="onClickExpandRx($event.checked)">
Rx
</mat-checkbox>
<button
class="btn btn-default"
id="cancelConfirmForDelete"
(click)="cancelConfirmDelete()"
translate>
Cancel
</button>
When clicking the button I need to make the checkbox checked. I am using angular 6
Since you're binding to uncheckrx on your mat-checkbox, you can simply set that to true inside the cancelConfirmDelete method and that should do the trick.
Just implement your functions like this:
import {Component} from '@angular/core';
@Component({
selector: 'checkbox-overview-example',
templateUrl: 'checkbox-overview-example.html',
styleUrls: ['checkbox-overview-example.css'],
})
export class CheckboxOverviewExample {
uncheckrx;
onClickExpandRx(checked) {
this.uncheckrx = checked;
}
cancelConfirmDelete() {
this.uncheckrx = true;
}
}
Here's a Working Sample StackBlitz for your ref.
mat-checkbox accepts a checked @Input property that the OP is binding to in their implementation. And I'm suggesting to change it in the cancelConfirmDelete method which will eventually change the checked state of the mat-checkbox. Would you please comment on why is this NOT an Angular way to doing this? I kinda lost you there.You can do it with a ngModel binding like:
<mat-checkbox
[(ngModel)]="value"
name="test">THIS IS A CHECKBOX</mat-checkbox>
Set in your component/container the value to "true", for example in your button click function. See more at https://material.angular.io/components/checkbox
Create ngModel binding to switch checked status
<mat-checkbox [(ngModel)]="isOtherChecked">
Other (please specify):
</mat-checkbox>
TS
export class AppComponent {
isChecked:boolean = false;
dropdownChangeEvent(event: any) {
this.isChecked = true;
}
}
