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