bootstrap 4 and font awesome example

This example uses bootstrap 4 and font awesome but it is possible use component also without them.

Example is here.

<!-- add the following snippet inside your template -->
<div class="input-group">
  <!-- input box -->
  <input class="form-control" name="mydate" placeholder="Select a date" 
         angular-mydatepicker #dp="angular-mydatepicker" 
         [(ngModel)]="model" [options]="myDpOptions" 
         (dateChanged)="onDateChanged($event)"/>

  <!-- clear date button -->
  <div class="input-group-append">
    <button type="button" class="btn btn-secondary" *ngIf="model" (click)="dp.clearDate()">
      <i class="fa fa-close"></i>
    </button>
  </div>

  <!-- toggle calendar button -->
  <div class="input-group-append">
    <button type="button" class="btn btn-secondary" (click)="dp.toggleCalendar()">
      <i class="fa fa-calendar-o"></i>
    </button>
  </div>

</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() { }

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