Как выполнить фильтрацию нажатием кнопки при использовании средства выбора диапазона дат ngx- bootstrap?

Question

https://valor-software.com/ngx-bootstrap/# / datepicker # date-initial-state Я работаю над проектом angular и использую тот же пример, что и на странице, на которую я указал. Я хочу отфильтровать данные по дате. Поэтому я выбираю интервал дат из средства выбора диапазона дат и получаю данные между этими датами. Это уже работает. Я хочу изменить следующее: теперь, если я выбираю даты, он автоматически меняет значения переменных и выполняет фильтрацию, но я сделал кнопку «Применить», которую хочу использовать ТОЛЬКО для фильтрации. Итак, я хочу выбрать даты, и после нажатия на кнопку «Применить» изменится значение переменных. Вы можете в этом помочь?

component. html

<div class="form-group col-3">
          <label for="time" class="w-100 mb-0">Time</label>
          <div class="input-group d-flex">
              <input id="time"
                     type="text"
                     placeholder="dd-mm-yyyy - dd-mm-yyyy"
                     class="form-control"
                     aria-describedby="button-addon"
                     #drp="bsDaterangepicker"
                     bsDaterangepicker
                     [(ngModel)]="bsRangeValue"
                     [maxDate]="maxDate"
                     [minDate]="minDate"
                     [bsConfig]="dpConfig"
              >
              <div class="input-group-append d-flex">
                <button class="btn btn-primary"
                        (click)="drp.toggle()"
                        [attr.aria-expanded]="drp.isOpen">
                  <i class="material-icons">
                    date_range
                  </i>
                </button>
              </div>
          </div>
        </div>
        <div class="mt-4 mb-3 col-3 d-flex">
          <button type="submit"
                  class="btn btn-info"
                  (click)="filter()">
            Apply
          </button>
        </div>
<div class="card">
<table class="table col-12">
              <ng-container *ngFor="let log of logList">
                <ng-container *ngIf="(log.time >= (bsRangeValue[0] | date:'MM/dd/yyyy')) && (log.time <= (bsRangeValue[1] | date:'MM/dd/yyyy')) ">
//content
                </ng-container>
              </ng-container>
            </table>
          </div>

component.ts:

export class LogsComponent implements OnInit {
  bsValue = new Date();
  bsRangeValue: Date[];
  maxDate = new Date();
  minDate = new Date("01/01/2000");

  public dpConfig: Partial<BsDaterangepickerConfig> = new BsDaterangepickerConfig();

logList = [];

constructor(private spinner: NgxSpinnerService) {
    this.dpConfig.containerClass = 'theme-red';
    this.dpConfig.dateInputFormat = 'MM/DD/YYYY';
    this.dpConfig.rangeInputFormat = 'MM/DD/YYYY';
    this.dpConfig.showWeekNumbers = false;
    this.bsValue.setDate(this.bsValue.getDate() - 31);
    this.bsRangeValue = [this.bsValue, this.maxDate];
  }

filter() {
    this.spinner.show();
    setTimeout(() => {
      this.spinner.hide()
    }, 1000);
    this.bsRangeValue = [this.bsRangeValue[0], this.bsRangeValue[1]];
  }
}