Why does my custom checkbox not correctly propagate change value if I set the type after view init?

I am writing some wrappers for normal form controls in my angular app by writing components / directives that have selectors like 'input[custom-input]'. By doing that I am able to setup public methods that can later be used when doing content projection.

My Html then looks like

<a-component-that-handles-animating-placeholder-etc>
    <input custom-checkbox formControlName="field"/>
</<a-component-that-handles-animating-placeholder-etc>

The advantage here is that the input is available directly to any component that might want to use it, whereas if I wrote a wrapper I would have to implement a pipeline for every functionality such as disabled e.g

<custom-input [disabled]="isDisabled"]></custom-input>

Another advantage is that I do not have to implement new custom control value accessors to bind formcontrolName on and make the framework happy, when in reality the implementation of custom-input would be to just internally use input, which for every control adds a lot of complexity to the project.

The problem is that the reactive form control is not being updated with the correct value when the checkbox is checked and unchecked. In my custom component with this selector input[custom-checkbox] I am doing this logic:

  ngAfterViewInit(): void {
    this.renderer.setAttribute(this.el.nativeElement, 'type', 'checkbox');
  }

Thats because I dont want consumers to have to specify that this element is a checkbox twice like so:

<input type="checkbox" custom-checkbox/>

But for some reason setting the type after the render is breaking the event that updated the form control. I have no idea why.

from Why does my custom checkbox not correctly propagate change value if I set the type after view init?