On my HTML page, I have two input fields for dates that need to be passed to the backend along with other parameters when a button is clicked. Here is the current setup:
<input [owlDateTime]="dt1" placeholder="From a date" [value]="dateFrom.value">
<span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span>
<owl-date-time #dt1></owl-date-time>
<input [owlDateTime]="dt2" placeholder="To a date" [value]="dateTo.value">
<span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
<owl-date-time #dt2></owl-date-time>
<button class="startButton" mat-raised-button color="primary"
(click)="loadData(81,topSelect.value,txtFilter.value,dt1.getValidDate,dt2.getValidDate)">
Search
<i class="fa fa-search pb-icon" aria-hidden="true"></i>
</button>
In the TypeScript file:
public loadData(customerId: number, topResult: number, searchTxt?: string, dateFrom?: Date, dateTo?: Date) {
this.interfaceService.getLogsForCustomer(customerId, topResult, searchTxt, dateFrom, dateTo).subscribe((logs: Log[]) => {
this.logs = logs;
this.dataSource = new MatTableDataSource<Log>(this.logs);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
});
}