如何在 function 调用 angular 6 时选中 angular 复选框

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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;
}

}