own style in input box (no bootstrap)

Input box has an own style and the parent element div have to be position: relative style in order the calendar open the right position.

<style>
  .input-box-container {
    position: relative;
  }
  .input-box {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 16px;
  }
</style>

<!-- add the following snippet inside your template -->
<div class="input-box-container">
  <input class="input-box" placeholder="Click to select a date" 
    angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" 
    [(ngModel)]="model" [options]="myDpOptions" 
    #dp="angular-mydatepicker" (dateChanged)="onDateChanged($event)"/>
</div>

import {IAngularMyDpOptions, IMyDateModel} from 'angular-mydatepicker';
// other imports are here...

export class MyTestApp {
  myDpOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: 'dd.mm.yyyy'
    // other options are here...
  };

  model: IMyDateModel = null;

  constructor() { }

  onDateChanged(event: IMyDateModel): void {
    // date selected
  }
}