To solve the problem you could create a list of checkboxes:
checkboxes = [
{
id: 'cb1',
name: 'Special (not combinable)',
value: false
},
{
id: 'cb2',
name: 'Example'
value: true
},
{
id: 'cb3',
name: 'Another one'
value: false
},
{
id: 'cb4',
name: 'Toggle 1'
value: false
},
{
id: 'cb5',
name: 'Toggle 2'
value: false
}
]
Then in template you can iterate over this list:
<div *ngFor="let cb of checkboxes">
<input
type="checkbox"
[checked]="cb.value"
(change)="onCheck(cb)"
/>
<span [innerHtml]="cb.name"></span>
</div>
The whole check/uncheck logic could be contained in an onCheck method:
onCheck(selected) {
let id = selected.id;
let newValue = !selected.value;
switch(id) {
case 'cb1':
if (newValue) {
this.checkboxes = this.checkboxes.map(cb => {
if (cb.id === id) {
// set new value
cb.value = newValue
} else {
if (newValue) {
// uncheck checkbox 1-4 if checkbox 1 is checked
cb.value = false;
}
}
return cb;
})
}
break;
case 'cb2':
case 'cb3':
case 'cb4':
case 'cb5':
this.checkboxes = this.checkboxes.map(cb => {
// uncheck checkbox 1
if (newValue && cb.id === 'cb1') {
cb.value = false;
}
// set new value
if(cb.id === id) {
cb.value = newValue;
}
// toggle checkbox 4 / checkbox 5
if (['cb4', 'cb5'].indexOf(id) > -1 && ['cb4', 'cb5'].indexOf(cb.id) > -1 && cb.id !== id) {
cb.value = !newValue;
}
return cb;
})
break;
}
}
I hope this helps to solve your problem. A full working example is here