Navigation customization

I'm trying to customize the navigation of the ngbDatepicker component, as there is no exported template to customize the navigation, I'm trying to create a component to be inserted into footerTemplate.

<ngb-datepicker
#dp
[(ngModel)]="model"
(navigate)="date = $event.next"
navigation="none"
[footerTemplate]="footerCalendar"
/>
<input
class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
[(ngModel)]="model"
ngbDatepicker
#d="ngbDatepicker"
navigation="none"
[footerTemplate]="footerCalendar"
/>
<ng-template #footerCalendar>
<footer-component [dateInputPicker]="dp" />
</ng-template>


But I'm facing some difficulties implementing the navigation methods because the instance I receive from input is different from the ngb-datepicker component. Being NgbDatepicker and NgbInputDatepicker.

The image below is the model I intend to make:



Below is the reproduction link: https://stackblitz.com/edit/angular-mudjsn?file=src/app/datepicker-basic.html

I would like to know how it is possible to customize the navigation.

Continue reading...