Angular 2 attribute component is wrapping the template in the input tag

Question

I am attempting to create a DatePicker component in Angular 2.

I would like this to be an attribute component, so my html would look like:

<input type='text' datePicker [(ngModel)]='myDate' />

The problem is when rendering the template, it wraps it inside the input tag.

My template looks like this:

<ng-content></ng-content>
<div class="datePickerContainer">Test</div>

When I inspect the element in the browser, it looks like:

<input class='ng-pristine ng-valid' datepicker type="text" ng-reflect-date-picker>
    <div class="datePickerContainer">Test</div>
</input>

Which makes it invisible to the browser. It really needs to be appended after the input tag.

What I am expecting to see is:

<input class='ng-pristine ng-valid' datepicker type="text" ng-reflect-date-picker />
<div class="datePickerContainer">Test</div>

How can I get my template to render after the input tag instead of having it wrapped inside of it?