When my page loads, there are two checkboxes: Active and InActive. By default, both are checked (true) and the user has the ability to uncheck either one, but not both at the same time.
To handle this situation, I implemented a getter method to retrieve the checkbox values and a method call to validate any changes made.
My TypeScript code:
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-actions-filter',
templateUrl: './actions-filter.component.html',
styleUrls: ['./actions-filter.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ActionsFilterComponent implements OnInit {
private _isActive: boolean = true;
get isActive(): boolean {
return this._isActive;
}
setActive(value: boolean) {
if (this._isInActive === false && value === false) {
this._isActive = true;
return;
}
this._isActive = value;
}
private _isInActive: boolean = true;
get isInActive(): boolean {
return this._isInactive;
}
setInActive(value: boolean) {
if (this._isActive === false && value === false) {
this._isInActive = true;
return;
}
this._isInActive = value;
}
constructor() {}
ngOnInit() {}
}
And here is my HTML:
<div class="app-filter-block">
<div class="btn-group">
<div class="checkbox btn">
<input type="checkbox" id="btn-action-active" (change)='setActive($event.target.checked)' [checked]="isActive" />
<label for="btn-action-active"> Active </label>
</div>
<div class="checkbox btn">
<input type="checkbox" id="btn-action-inactive" (change)='setInActive($event.target.checked)'
[checked]='isInActive' />
<label for="btn-action-inactive"> Inactive </label>
</div>
</div>
</div>
Additionally, the checkboxes are styled using Clarity UI components. More information can be found here.