angular mat-checkbox checked value

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.

Continue reading...