angular mat-checkbox选中值

Question

I have ts code:

import {Component} from '@angular/core';

@Component({
  selector: 'checkbox-configurable-example',
  templateUrl: 'checkbox-configurable-example.html',
  styleUrls: ['checkbox-configurable-example.css'],
})
export class CheckboxConfigurableExample {
  checked = false;
  indeterminate = false;
  align = 'start';
  disabled = false;

  items = [{selected: true, label: 'First Item'}, {selected: false, label: 'Second Item'}];
}

html code:

<mat-card>
  <mat-card-content>
    <h2 class="example-h2">Checkbox configuration</h2>

    <section class="example-section">
      <mat-checkbox class="example-margin" [(ngModel)]="checked">Items</mat-checkbox>
    </section>

    <h2 class="example-h2">Result</h2>

    <section class="example-section" *ngFor="let item of items">
      <mat-checkbox  class="example-margin" [(ngModel)]="checked">{{item.label}}</mat-checkbox>
    </section>


  </mat-card-content>
</mat-card>

css file:

.example-h2 {
  margin: 10px;
}

.example-section {
  display: flex;
  align-content: center;
  align-items: center;
  height: 60px;
}

.example-margin {
  margin: 0 10px;
}

According to the code, I have a mat-checkbox 'Items' and 2 mat-checkboxes 'First Item', 'Second Item'. If the 'Items' is unchecked, 'First Item' and 'Second Item' must be automatically unchecked. If you check the 'Items' checkbox, checkboxes for 'First Item' and 'Second Item' must be checked.

How to implement the following behavior (in addition to the above conditions)?

1. If 'First Item' or 'Second Item' is selected, the 'Items' must also go to the checked state. Moreover, if 'First Item' is selected, 'checked' status of 'Second Item' does not change and vice versa.
2. If 'First Item' and 'Second Item' checkboxes are unchecked, the 'Items' checkbox must also be unchecked.

Answer 1

You should create two methods for example: onCheckedItem, onCheckedResult. In onCheckedItem method set every items.selected value to checked value (true or false it depends on checked value). In onCheckedResult we create an array which will hold the items.selected value, and if this selectedArray includes true, it will set checked checkbox value true else it will false. ngOnInit lifecycle hook is necessary if you have items.selected : true initially in your items object.

import {Component, OnInit} from '@angular/core';
....
export class CheckboxConfigurableExample implements OnInit{
  checked: boolean = false;

  items = [
   {selected: true, label: 'First Item'}, 
   {selected: false, label: 'Second Item'}
  ];

  ngOnInit(): void {
    this.onCheckedResult();
  }

  onCheckedItem() {
    this.items.forEach((item) => {
      item.selected = this.checked
    });
  }

  onCheckedResult() {
    let selectedArray = [];
    this.items.forEach((item) => {
      selectedArray.push(item.selected)
    });
    selectedArray.includes(true) ? this.checked = true : this.checked = false;
  }
}

In your template you have to set change event on every checkbox like the following:

<h3>Checkbox configuration</h3>
<mat-checkbox (change)="onCheckedItem()" [(ngModel)]="checked"> Item</mat-checkbox>
<h3>Results</h3>
<ng-container *ngFor="let item of items">
  <mat-checkbox (change)="onCheckedResult()" [(ngModel)]="item.selected" class="chk-box"> 
    {{ item.label }}
  </mat-checkbox>
</ng-container>

Cheers