Pagination with custom pipe

[tonywong625]

Hey,

Is anyone having issue with custom pipe?

Here is my custom pipe

import { Pipe } from '@angular/core';

// Tell Angular2 we're creating a Pipe with TypeScript decorators
@Pipe({
    name: 'showfilter',
    pure: false
})

export class ShowPipe {
    transform(value) {
        return value.filter(item => {
            return item.visible == true;
        });
    }
}

Component

import { ShowPipe } from '../pipes/show.pipe';
import { PaginatePipe, PaginationControlsCmp, PaginationService } from 'ng2-pagination';

@Component({
    selector: 'results',
    templateUrl: 'app/templates/results.html',
    pipes: [PaginatePipe, ShowPipe]
})

HTML

<flights *ngFor="let item of items | showfilter | paginate: { itemsPerPage: 10, currentPage: p }">
</flights>

When I have showfilter and paginate, no results are shown.

If I change HTML to

<flights *ngFor="let item of items | showfilter">
</flights>

Everything is working.

Now if I change HTML to

<flights *ngFor="let item of items | paginate: { itemsPerPage: 10, currentPage: p }">
</flights>

Pagination works.

Is there a way to have custom pipe working with paginate like the example on your website: http://michaelbromley.github.io/ng2-pagination/ (Full example)

[michaelbromley]

Hi,
Could be related to #23 - if the pipe is not pure (as in your example), the PaginatePipe starts to run many, many times and eventually will crash the browser window. Looking into exactly why that happens...

[michaelbromley]

Just published a new version, 0.3.4. Try it out and let me know if it fixes your issue.

[tonywong625]

thanks i think 0.3.4 fixed the issue.

However now I found another issue.

When im on page 10 then change a filter to limit the items down to 5 pages of results. It will error out showing

ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]'

[tonywong625]

i had to do enableProdMode( ), not sure if thats a good idea or not thou.

[michaelbromley]

@tonywong625 Thanks for the report. Enabling prod mode "fixes" things, but not really.

In dev mode, Angular runs change detection twice, one to update values, and the second just to ensure that nothing changed after the first pass (which would be bad and breaks the data flow model). That's why you get the exception. In production, checking twice would slow things down, so they only do the first pass and assume you ironed all of the issues out in dev mode.

So yeah, this is an issue which I will take a look at.

[michaelbromley]

@tonywong625 Can you provide a reproduction Plunker of the issue with the change detection?

[truj]

I had the same problem (Expression has changed after it was checked)
A workaround in the component fixed it.

Instead of

onPageChange(page: number): void {
    this.currentPage = page;
} 

I did:

onPageChange(page: number): void {
    setTimeout(() => {
        this.currentPage = page;
    }, 3);
}