In my Angular-14 project, I am consuming an end-point from ASP.Net Core-6 Web API using JSON response.
Without Parameter, my endpoint URL from is like this:
https://localhost/MyApp/api/v1/all-merchants
While with Parameter it becomes:
https://localhost/MyApp/api/v1/all-merchants?StartDate=2022-01-01&EndDate=2023-01-01&PageNumber=2&PageSize=10
Then I have this JSON response from the Web API:
{
"data": {
"pageItems": [
{
"id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
"merchantName": "Jonathan Plc",
"accountName": "Jonathan"
"createdAt": "2022-02-02T09:54:12.513"
}
],
"currentPage": 2,
"pageSize": 10,
"numberOfPages": 6,
"totalRecord": 55
"previousPage": 1
},
"successful": true,
"message": "string",
"statusCode": 0
}
ANGULAR
I have the Angular code below
Service:
getAllMerchantsPagination(pageNumber?: number,pageSize?: number): Observable<IMerchantList[]> {
return this.http.get<IMerchantList[]>(this.baseUrl + '/merchants/all-merchants?pagenumber='+ pageNumber+'&pageSize='+pageSize);
}
model (IMerchantList):
export interface IPageItem {
id: string;
merchantName: string;
accountName: string;
createdAt: Date
}
export interface IData {
pageItems: IPageItem[];
pageSize: number;
currentPage: number;
numberOfPages: number;
totalRecord: number;
}
export interface IMerchantList {
data: IData;
successful: boolean;
message: string;
statusCode: number;
}
Then I have the component:
component.ts:
allMerchantList: any[] = [];
dataBk: IPageItem[] = this.allMerchantList;
pageSize: number = 10;
currentPage: number = 1;
numberOfPages!: number;
totalRecords: number = 0;
pageSizes = [10, 20, 50, 100];
loadAllMerchants() {
this.merchantService.getAllMerchantsPagination(this.currentPage, this.pageSize).subscribe({
next: (res: any) => {
this.allMerchantList = res.data.pageItems;
this.totalRecords = res.data.totalRecord;
this.currentPage = res.data.currentPage;
this.pageSize = res.data.pageSize;
this.dataBk = res.data.pageItems;
}
})
}
handlePageChange(event: number): void {
this.currentPage = event;
this.loadAllMerchants();
}
handlePageSizeChange(event: any): void {
this.pageSize = event.target.value;
this.currentPage = 1;
this.loadAllMerchants();
}
component.html
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="startDate">Start Date</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input type="text"
bsDatepicker
[minDate]="minStartDate"
[bsConfig]="{ isAnimated: true, dateInputFormat: 'DD-MM-YYYY', returnFocusToInput: true, showClearButton: true, clearPosition: 'right' }">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="endDate">End Date</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input type="text"
placeholder="DD-MM-YYYY"
bsDatepicker
[minDate]="minEndDate"
[bsConfig]="{ isAnimated: true, dateInputFormat: 'DD-MM-YYYY', returnFocusToInput: true, showClearButton: true, clearPosition: 'right' }">
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 10px">#</th>
<th [class.active]="order === 'merchantName'" (click)="setOrder('merchantName')">Merchant Name <span [hidden]="reverse">▼</span
><span [hidden]="!reverse">▲</span></th>
<th [class.active]="order === 'accountName'" (click)="setOrder('accountName')">Merchant Account Name. <span [hidden]="reverse">▼</span
><span [hidden]="!reverse">▲</span></th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody *ngIf="allMerchantList != undefined">
<tr *ngFor="let row of allMerchantList
| paginate : {
itemsPerPage: pageSize,
currentPage: currentPage,
totalItems: totalRecords
} | orderBy: order:reverse:caseInsensitive; let i = index;">
<td style="width: 80px">
{{ i + 1 }}.</td>
<td>{{ row?.merchantName || 'N/A' }}</td>
<td>{{ row?.accountName || 'N/A' }}</td>
</tr>
<tr *ngIf="allMerchantList.length ==0;">
<td colspan="7" class="text-center">
<span class="align-center">No Data Found!</span>
</td>
</tr>
</tbody>
</table>
CreatedAt field is used as the StartDate andEndDate
With ngx-pagination, the pagination is working fine.
However, using ngx-bootstrap-datepicker, I want the user to select the StartDate and End Date, then click on the Submit button. When this is done, it should display the result on the html table shown in the code.
How do I modify my code in the service, component and html to achieve this?
