Angular2: Indeterminate (tristate) checkbox

I'm trying to do a tri-state checkbox in Angular v.2.3 with a directive:

directive:

@Directive({
  selector: '[checkboxIndeterminate]'
})
export class IndeterminateDirective {

  constructor(el: ElementRef, renderer: Renderer) {
    renderer.setElementProperty(el.nativeElement, 'indeterminate', true);
  }
}

template:

<input [id]="it.id" 
       class="custom-input-check"
       type="checkbox"
       name="check" 
       [(ngModel)]="check"
       (change)="onChangeCheckbox(it.id, $event)"
       checkboxIndeterminate 
/>

But doesn't work as expected... The result is the two-state checkbox...

How can I do it?

Thank you so much! 😊