I have successfully implemented pagination in my Angular 2 app by utilizing the ng2-pagination module. Now, I am looking to enhance the communication between components. Each component in my app has its own unique API call but all load their data into a common tabular display component.
To bind data from one component to another, I use square brackets notation with the "records" property like this:
<tabular-display [records]="records"></tabular-display>
Within the 'tabular-display' component, I then utilize the @Input() decorator to access the records data as follows:
@Input() records = [];
In the template of the tabular-display component, I loop over the array of records and apply the pagination pipe like so:
<tr *ngFor="let record of records.data | paginate: { id: 'clients', itemsPerPage: 12, currentPage: page, totalItems: records.count }">
Beneath this section in the 'tabular-display' view, the pagination-controls component is used to handle generating the correct number of pages based on the aforementioned iteration. This is done in the following manner:
<pagination-controls class="paginator" (pageChange)="pageChange($event)" id="clients"
maxSize="15"
directionLinks="true"
autoHide="true">
</pagination-controls>
My current objective is to ensure that the "pageChange()" event shown above can be propagated to the data component for fetching the appropriate data. One approach I attempted involves using an @Output() along with an EventEmitter():
@Output() sendChange = new EventEmitter();
pageChange($event) {
this.sendChange.emit(this.page);
console.log($event);
}
Upon emitting the correct page number to the console, the challenge lies in how the data component receives this emitted data. How can the data component effectively capture this emitted event?
Meanwhile, here is the function where the page change event should be directed towards within the data component. What steps are necessary for this function to receive the event emitted from the tabular-display component?
getPageByCategory(page) {
this.clientsService.getByCategory('consulting', page, this.pagesize)
.subscribe(resRecordsData => {
this.records = resRecordsData;
this.page = page;
console.log(page);
},
responseRecordsError => this.errorMsg = responseRecordsError);
}