Угловая программа выбора диапазона начальной загрузки во всплывающем окне?

Я пытаюсь показать в моем угловом приложении средство выбора диапазона дат, используя ng-bootstrap. Мой код выглядит следующим образом:

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

Как мне показать всплывающую подсказку во всплывающем окне?

Согласно ответу, я попробовал следующее, но всплывающее окно не отображается при нажатии:

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

Ответы на вопрос(3)

Ваш ответ на вопрос