How to filter from ngx-daterangepicker-material the dataSource of a table (mat-table)?

Question

I have a problem, well I haven't done it before so I don't know where to start

My problem is that I want to be able to filter a table from my date range that I get thanks to the ngx-daterangepicker-material library where through an event it triggers a start date and an end date

So what I want to do is once I have the date range pass it to my MatTableDataSource, I thought I could have an observable that listens when the date range changes in my ngx-daterangepicker-material

I did a demo, as an example but in the demo the dates are inside the table, I suppose in that case it would be a sort so that every time the date range changes the table is sorted, but what would happen if it is the request that Will it receive the "selected" from the ngx-daterangepicker-material? that is to say, once I have the event I pass it to the request and in my "res" when filling my datasource with the new data that changed due to the event that was triggered, my MatTableDataSource receives it to immediately render the table with the new one information

Can this be done with observables? How does it work?

This is the demo, it is a table and the datepicker both are separated currently, I would like to find a way to join both, so that when the event is fired my dataSource will listen and order the table

DEMO

In the event that it is the request that receives the range of dates selected in the selector, in my service I have something like this:7

// Here I am listening to the response I get from my request, where I receive a range of dates
    getDailyTracking(daterange: any) : Observable<DailyHistoricActivity> {
        let url = `${environment.API_URL}${this.dayliTracked}`;
        let queryParams: HttpParams = new HttpParams();
        const { start_date, end_date } = dateRange;
        queryParams = queryParams.append('start_date', dayjs(start_date).format('YYYY-MM-DD'));
        queryParams = queryParams.append('end_date', dayjs(end_date).format('YYYY-MM-DD'));

        return this.http.get<DailyHistoricActivity>(url, {params: queryParams});
    }

And in my ts, I would pass the date range that I get from ngx-daterangepicker-material and right there I would have to find a way to fill my dataSource so that it is rendering the data according to what it gets from "selected"

getDataIsSelected() {
    let dailydata = {
      start_date: this.selected.startDate.format("YYYY-MM-DD"),
      end_date: this.selected.endDate.format("YYYY-MM-DD")
    }

    this.activityDaily.getDailyTracking(dataDaily).pipe(takeUntil(this.unsubscribe$)).subscribe((res) => {
      this.requests = res.apidata;

/// Here I would have to fill the table

    });
  }

I know it's a rather long question but I don't understand how I can make the table listen for the change of dates and when that happens it renders the table according to what change is the response from the api

EDIT: Technically what I need is to find a way to refresh a table every time the API response changes in Angular. And the response of the api will change when the picker event is fired

Answer 1

My mistake was that I was not calling the query params that made the request correctly, the whole flow had it correctly, I just had to pass it the object that I received from my ngx-daterangepicker-material. When doing that, leave the dataSource inside the ts component and not inside the service, since doing it inside the service since I was not going to use it elsewhere and it was better to leave it in the scope of this, then to the object that fills my table assign the new values that I am bringing into the body of the subscribe and with that I detect the changes in angular and redraw the table.

In my component I create the data source and declare a new variable where I will set the response of my request

 dataSource = new MatTableDataSource<ApidatumDisplay>();
 request: ApidatumDisplay[] = []

Create a method where I will fill the dataSource with the response from the API

getDataFromApi() {

// Event of ngx-daterangepicker-material
    let dateTimeRange = {
      startDate: this.dateRange.dates[0].format("YYYY-MM-DD"),
      endDate: this.dateRange.dates[1].format("YYYY-MM-DD")
    }

    this.reportsService.getDailyTracking(dateTimeRange).pipe(takeUntil(this.unsubscribe$)).subscribe((res) => {
      this.request = res.apidata;
      this.dataSource.data = this.request;
      console.log('this.reportesService$.dataSource', this.dataSource);
      this.averageTotal = res.adding_total_activity
      this.hourTimeTotal = this.convert(res.adding_total_hours);
      this.expectedBudget = 192 * 22;
      this.isReload = false;
    });

  }

Then I just make sure what data is being fetched at the start of the component and what data is being fetched every time the user selects a custom range. Since ngx-daterangepicker-material fires two events "this.selected" when starting the component by default and "this.dateRange" when the range is customized

  ngOnInit(): void {
    this.selected ? this.getDataIsSelected() : this.getDataFromApi();
  }

And in my HTML I just set the dataSource and loop through the elements of my array

<table mat-table [dataSource]="dataSource"></table>