Estoy tratando de mostrar un selector de rango de fechas en mi aplicación angular usando ng-bootstrap. Mi código tiene el siguiente aspecto:

<ngb-datepicker #dp ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t">
            </ngb-datepicker>

            <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 }}
              </span>
            </ng-template>

¿Cómo debo mostrar el selector de rango anterior en una ventana emergente?

Según una respuesta, probé lo siguiente pero la ventana emergente no es visible al hacer clic:

 <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Pick Date Range
           </button>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Optional title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

            <ngb-datepicker #dp ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t">
            </ngb-datepicker>

            <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 }}
              </span>
            </ng-template>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>