Binding Data Component to Tabular Display Component in Angular 2 App

Question

I have pagination working in my Angular 2 app, making use of the handy ng2-pagination module. Now I'd like to be able to pass information between components. I have several components with unique api calls, that all load their content into the same tabular display. That tabular display is thus the component with the tabular view.

I am already binding the the component with the data to the component with the tabular view, by using square brackets notation to bind "records", like this:

<tabular-display [records]="records"></tabular-display>

Then, in the 'tabular-display' component I am using the @Input() decorator to have access to those records data, like this:

@Input() records = [];

In the tabular-display comp view, I am iterating over that array of records, and then passing them through the pagination pipe, like this:

<tr *ngFor="let record of records.data | paginate: { id: 'clients', itemsPerPage: 12, currentPage: page, totalItems: records.count }">

Now, just below this area in the 'tabular-display' view, the pagination-pipe uses 'pagination-controls' to handle generating the correct number of pages from the *ngFor iteration above. That looks like this:

    <pagination-controls class="paginator" (pageChange)="pageChange($event)" id="clients"
            maxSize="15"
            directionLinks="true"
            autoHide="true">
    </pagination-controls>

My last task is to have this "pageChange()" event you see right above here pass that event through to the data component - so the correct data can be called. How best to do that? I've tried it using an @Output() and an EventEmitter():

@Output() sendChange = new EventEmitter();

pageChange($event) {
    this.sendChange.emit(this.page);
    console.log($event);
}

And I get the correct page number printed to the console. But how does the data-component pick up on (i.e. have access to) that emitted data? How does it 'receive' that emitted data?

By the way, here is the function that I need to pass the page change event to. How does this function in the data component get 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);
}

Pezetter Pezetter · Accepted Answer · 2017-04-11T22:44:39

On pageChange, change/get the contents of records with its corresponding page. Change detection will automatically update your tabular-display component.

User clicks page two, emit that event.
Get page 2 records from your http request or whatever your source is.
Set the above value to records, and change detection will take care of the rest

Binding Data Component to Tabular Display Component in Angular 2 App

1 Answers