Check out my TypeScript code below:
import {Component} from '@angular/core';
@Component({
selector: 'checkbox-configuration-example',
templateUrl: 'checkbox-configuration-example.html',
styleUrls: ['checkbox-configuration-example.css'],
})
export class CheckboxConfigurationExample {
checked = false;
indeterminate = false;
align = 'start';
disabled = false;
items = [{selected: true, label: 'First Item'}, {selected: false, label: 'Second Item'}];
}
Here is the corresponding 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>
And here is the CSS code:
.example-h2 {
margin: 10px;
}
.example-section {
display: flex;
align-content: center;
align-items: center;
height: 60px;
}
.example-margin {
margin: 0 10px;
}
In addition to the conditions mentioned in the code, we need to implement the following behaviors:
- If either 'First Item' or 'Second Item' is selected, the 'Items' checkbox should also be checked. However, if 'First Item' is selected, the status of 'Second Item' should remain unchanged and vice versa.
- If both 'First Item' and 'Second Item' checkboxes are unchecked, the 'Items' checkbox should also be unchecked.