call function of the directive

<input angular-mydatepicker name="mydate" [(ngModel)]="model" 
    [options]="myOptions" #dp="angular-mydatepicker"/>
<div>
    <!-- call the openCalendar() function -->
    <button type="button" (click)="dp.openCalendar()">Open</button>

    <!-- call the closeCalendar() function -->
    <button type="button" (click)="dp.closeCalendar()">Close</button>

    <!-- call the toggleCalendar() function -->
    <button type="button" (click)="dp.toggleCalendar()">Toggle</button>

    <!-- call the clearDate() function -->
    <button type="button" (click)="dp.clearDate()">Clear</button>
</div>

import {AngularMyDatePickerDirective, 
        IAngularMyDpOptions, 
        IMyDateModel, HeaderAction} from 'angular-mydatepicker';

export class MyApp {
    @ViewChild('dp') mydp: AngularMyDatePickerDirective;

    myDatePickerOptions: IAngularMyDpOptions = {
        // options here...
    }

    model: IMyDateModel = null;

    constructor() {}

    // call the clearDate() function of the directive
    clearDate(): void {
        this.mydp.clearDate();
    }

    // call the isDateValid() function of the directive
    checkDateValidity(): void {
        let valid: boolean = this.mydp.isDateValid();
        console.log('Valid date in the input box: ', valid);
    }

    // header action examples
    clickPreviousBtn(): void {
        this.mydp.headerAction(HeaderAction.PrevBtnClick);
    }

    clickNextBtn(): void {
        this.mydp.headerAction(HeaderAction.NextBtnClick);
    }

    clickMonthBtn(): void {
        this.mydp.headerAction(HeaderAction.MonthBtnClick);
    }

    clickYearBtn(): void {
        this.mydp.headerAction(HeaderAction.YearBtnClick);
    }
}