How to create ng-bootstrap date range picker popup from button element - angular5

Question

I am trying to add functionality for the daterangepicker to allow for filtering of a list of items based on the date range selected.
I am looking to incorporate the following functionlity:
Have a button that says "Filter". No input.
User can click on that button which then opens the calendar showing 2 months - the current and next.
User can then select a date range.
The selected date range then becomes the label of the button showing the user what he or she selected.
Is this functionality possible? It breaks completely when I try to add the calendar on the button. And when I use the input to popup the calendar it only allows me to select a start date, then closes.
Here is what I am going for:
<button #dp ngModel (click)="d.toggle()" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t" ngbDatepicker #d="ngbDatepicker">
Click Me
</button>
<ng-template #t let-date="date" let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</ng-template>
Thanks