I am have a list of reservations data coming from an API and I need to add two buttons to filter the data of the datatable, one button for just show the reservations with check_in_date same as today date, and the other for the check_out_date

The problem is that when I open the page for the first time and click one of the filtering button it’s working fine, but when click any other filtering button it just emptying the table and none of them is working any more and no error logs or something and I must reload the page to use the other button

this is my ts code

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Config } from 'datatables.net';
import { Subject } from 'rxjs';
import { Reservation } from '../../../core/models/reservation.model';
import { ReservationsService } from '../../../core/services/reservations.service';
import { DatePipe } from '@angular/common';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-reservations-list',
  templateUrl: './list.component.html',
  styleUrl: './list.component.scss',
  providers: [DatePipe]
})
export class ListComponent implements OnInit, OnDestroy {
  dtOptions: Config = {};
  dtTrigger: Subject<any> = new Subject<any>();
  reservations: Reservation[] = [];
  filteredReservations: Reservation[] = [];

  constructor(private reservationsService: ReservationsService, private datePipe: DatePipe) { }

  ngOnInit(): void {
    this.dtOptions = {
      scrollX: true,
      scrollCollapse: true,
      pageLength: 25,
      processing: true,
      stateSave: true,
      pagingType: 'full_numbers',
      retrieve: true
    }

    this.getReservations();
  }

  getReservations(): void {
    this.reservationsService.getReservations().subscribe(data => {
      for (let reservation of data.data) {
        let finalReservation: Reservation = new Reservation(reservation.id, reservation.name, reservation.national_id, reservation.phone, reservation.unit, reservation.platform, reservation.guest, reservation.reference_id, reservation.day_amount, reservation.total_amount, reservation.paid_amount, reservation.remaining_amount, reservation.notes, reservation.employee, reservation.check_in_date, reservation.check_in_time, reservation.check_out_date, reservation.check_out_time, reservation.duration, reservation.status);
        this.reservations.push(finalReservation);
      }

      this.filteredReservations = this.reservations;
      this.dtTrigger.next(null);
    }, error => {
      Swal.fire({
        icon: 'error',
        title: 'Error!',
        text: error.error.message
      });
    });
  }

  filterCheckIn(): void {
    const today = this.datePipe.transform(new Date(), 'yyyy-MM-dd');

    this.filteredReservations = this.reservations.filter(reservation => {
      const checkInDate = this.datePipe.transform(reservation.check_in_date, 'yyyy-MM-dd');
      return checkInDate === today;
    });

    this.dtTrigger.next(null);
  }

  filterCheckOut(): void {
    const today = this.datePipe.transform(new Date(), 'yyyy-MM-dd');

    this.filteredReservations = this.reservations.filter(reservation => {
      const checkOutDate = this.datePipe.transform(reservation.check_out_date, 'yyyy-MM-dd');
      return checkOutDate === today;
    });

    this.dtTrigger.next(null);
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

And this is the html code

<table class="table table-hover row-border hover nowrap" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
  <thead class="bg-danger">
    <tr>
      <th class="p-3 text-center">ID</th>
      <th class="p-3 text-center">Name</th>
      <th class="p-3 text-center">Unit</th>
      <th class="p-3 text-center">Platform</th>
      <th class="p-3 text-center">Check In Date</th>
      <th class="p-3 text-center">Duration</th>
      <th class="p-3 text-center">Total Amount</th>
      <th class="p-3 text-center">Remaining Amount</th>
      <th class="p-3 text-center">Status</th>
      <th class="p-3 text-center">View</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let reservation of filteredReservations">
      <td class="p-3 text-center">{{ reservation.id }}</td>
      <td class="p-3 text-center">{{ reservation.name }}</td>
      <td class="p-3 text-center">{{ reservation.unit.name }}</td>
      <td class="p-3 text-center">
        <img [src]="'https://back.sky2030central.com' + reservation.platform.logo" [alt]="reservation.platform.name + 'Logo'"
          class="platform-logo">
      </td>
      <td class="p-3 text-center">{{ reservation.check_in_date | date: 'dd/MM/yyyy' }}</td>
      <td class="p-3 text-center">{{ reservation.duration }}</td>
      <td class="p-3 text-center">{{ reservation.total_amount }} SAR</td>
      <td class="p-3 text-center">
        <span class="p-2 rounded">{{ reservation.remaining_amount }}
          SAR</span>
      </td>
      <td class="p-3 text-center">
        <span class="p-2 rounded">{{ reservation.status }}</span>
      </td>
      <td class="p-3 text-center">
        <button type="button" class="btn btn-success text-center" [routerLink]="'../view/' + reservation.id">
          <i class="bi bi-eye"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>