angular2+: how to loop through the values of a three state (indeterminate) checkbox

I use angular 2+, bootstrap4, no jQuery

---

The reason why the checkbox needs to have three states, is because we use it to perform a query on the back-end (as one of a number of criteria) as follows:

• true: all items that are sold
• false: all items that are not sold
• null: don't use this criterion to filter

---

I managed to initialize the checkbox with indeterminate as it's initial value:

• html.component:

<input class="form-control" type="checkbox" formControlName="issold" (change)="onCheckboxIssoldChange($event)"
                                                   [indeterminate]="true" #issold>

• ts.component

set indeterminate(value: boolean) {
        this.elem.nativeElement.indeterminate = value;
    }

---

To loop through the values I tried two approaches:

1. using ElemenRef

    constructor(private elem: ElementRef) {} 

    indeterminateCounterSold : number = 0; 

    @ViewChild('issold', { static: true }) issold: ElementRef; 

    onCheckboxIssoldChange(e) {
this.indeterminateCounterSold++;
verifyTristateValue(this.indeterminateCounterSold);}  

verifyTristateValue(numberOfClicks: number)
    this.elem.nativeElement.indeterminate = true; // try version 1a
    this.issold.nativeElement.indeterminate = true; // try version 1b
    }

2. Using the (change)-function

reference: css-tricks

onCheckboxIssoldChange(checkbox: any) {
  if (checkbox.readOnly) {
  checkbox.checked = checkbox.readOnly = false;
}
else if (!checkbox.checked) {
  checkbox.readOnly = checkbox.indeterminate = true;
}
}

... and variations on both.