Initializing an indeterminate checkbox

I need to create an inderterminate checkbox which starts with the indeterminate status.

to do this I created a checkbox in my HTML

<div *ngIf="item.CanSearch && item.SearchType === 'Bool'"><input type="checkbox" id="my-checkbox"  name="insideListResourceIdsCB" (click)="indeterminateCheckbox($event.target)" /></div>

when you click the checkbox this function get's called (this part works without any problems)

/* function to create an indeterminate checkbox*/
public indeterminateCheckbox(cb) {       
    if (cb.readOnly) {
        cb.checked = cb.readOnly = false;
        this.insideListResourceIds = false;
    }
    else if (!cb.checked) {
        cb.readOnly = cb.indeterminate = true;
        this.insideListResourceIds = null;
    } else if (cb.checked) {
        this.insideListResourceIds = true;
    }
    this.getEmployeesOverview();
}

However the problem comes when I load my view. The checbox needs to have the visual state of indeterminate, this is only possible via javascript. To do this I've created this function:

ngAfterViewInit() {
        let checkbox = <any>$("#my-checkbox");
        checkbox.indeterminate = true;
}

however everytime I load my view, my checkbox is empty. I don't receive any errors however, when I console.log(checkbox) this is the result:

My question is: How do I correctly set the visual state of the checkbox to indeterminate when the view loads?