How to add third state to checkbox?

Hi I am developing web application in angular. I am displaying checkbox with three states. I am distinguishing states usng css classes. The three states are cross-marked,check marked and blank. Below is the implementation part.

<div *ngIf="node.data.checked==true && node.data.allow==true">
    <label class="container">
        <input (change)="check(node, !node.data.checked)" type="checkbox" [indeterminate]="node.data.indeterminate" [checked]="node.data.checked">
        <span class="checkmark"></span>
        
    </label>
</div>

<div *ngIf="node.data.checked==true && node.data.allow==false">
    <label class="container">
        <input (change)="check(node, !node.data.checked)" type="checkbox" [indeterminate]="node.data.indeterminate" [checked]="node.data.checked">
        <span class="checkmark xmark"></span>
        

    </label>
</div>

<div *ngIf="node.data.checked==false">
    <label class="container">
        <input (change)="check(node, !node.data.checked)" type="checkbox" [indeterminate]="node.data.indeterminate">
        <span class="checkmark"></span>
        

    </label>
</div>

I am attaching UI image above.

Device model1 contains cross marked,device model2 contains check marked and devicemodel4 contains blank. These are three states. Now when user clicks on any one of the checkboxe's state should change in the below path.

blank --> checked --> cross --> blank

Above is circular path. For example, if the checkbox is checked then when the user clicks on it then checkbox should become cross and if the user clicks it again then blank and if the user clicks it again then again checked and so on. Displaying part i have done. Can someone help me to make this work as i said above? Any help would be appreciated. Thank you.