Показать данные по календарю в угловых 6

Question

введите описание изображения здесь

Есть два календаря их. Из этого календаря есть дата начала и дата окончания, что я хочу от введенной даты, мы должны показать данные.

Это HTML-страница. Где есть два календаря, в которых мы можем выбрать дату. с помощью даты покажите данные, которые лежат в календаре.

                        <div class="half">
                            <label>From</label>
                            <div class="ac-date">
                                <input class="form-control" placeholder="dd/mm/yy" id="calender" ngbDatepicker [footerTemplate]="footerTemplate" #from_d="ngbDatepicker">
                                <div class="input-group-append">
                                    <button class="btn-calendar" (click)="from_d.toggle()" type="button"><i class="fa fa-calendar"></i></button>
                                </div>
                                <ng-template #footerTemplate>
                                    <hr class="my-0">
                                    <button class="btn btn-secondary btn-sm m-2 float-right" (click)="from_d.close()">Close</button>
                                </ng-template>  
                            </div>
                        </div>
                        <div class="half">
                            <label class="text-right">To</label>
                            <div class="ac-date to_date">
                                <input class="form-control" placeholder="dd/mm/yy" id="calender" ngbDatepicker [footerTemplate]="footerTemplate1" #to_d="ngbDatepicker">
                                <div class="input-group-append">
                                    <button class="btn-calendar" (click)="to_d.toggle()" type="button"><i class="fa fa-calendar"></i></button>
                                </div>
                                <ng-template #footerTemplate1>
                                    <hr class="my-0">
                                    <button class="btn btn-secondary btn-sm m-2 float-right" (click)="to_d.close()">Close</button>
                                </ng-template>  
                            </div>
                        </div>
                    </div>
    <div class="tab-pane active" id="trip_payments" role="tabpanel">
                            <div class="row table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Payment Mode</th>
                                            <th>Payment ID</th>
                                            <th>Order Status</th>
                                            <th>Payment Reason</th>
                                            <th>Amount</th>
                                            <th>Credit Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tbody>
                                        <tr *ngFor="let trip of user_trip_history; let i = index">

                                            <td>{{trip?.user_order_pay_mode}}</td>
                                            <td *ngIf="trip.user_order_pay_mode == 'cash'">{{trip?.user_order_receipt_no}}</td>
                                            <td *ngIf="trip.user_order_pay_mode == 'digital'">{{trip?.user_order_transaction_id}}</td>
                                            <td *ngIf="trip.user_order_pay_mode == 'cheque'">{{trip?.user_order_cheque_no}}</td>
                                            <td>{{trip?.user_order_status}}</td>
                                            <td>{{trip?.order_reason}}</td>
                                            <td>{{trip?.user_order_amount}}</td>
                                            <td>{{trip?.user_order_date}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

Это машинописный файл, в который мы получаем все данные. И выводим в таблицу. Что я хочу, когда мы вводим дату, то между этой датой информация должна отображаться в таблице.

    getPaymentData(user_id){
            this.paymentdetailService.getPaymentData(user_id)
                .toPromise()
                .then((res) => {
                    this.userPaymentDetail = res;
                    this.userPaymentDetail.response.totalamount;
                    this.spinner.hide();    
                    if (this.userPaymentDetail.response && this.userPaymentDetail.response.status == "success") {
                        this.totalaccount = this.userPaymentDetail.response.totalamount;
                        this.allData = this.userPaymentDetail.response.paymentdata;
                        this.noPayment = false;
                        this.filterPayment("0");
                    }
                    else{
                        this.spinner.hide();
                        this.noPayment = true;
                        this.toastr.warning('No data is available');
                    }
                },
                error => {
                    this.spinner.hide();
                    console.log('in error');
                    this.toastr.error('Something went wrong', 'Oops!');
                });     
        }