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 } }