ngx-pagination icon indicating copy to clipboard operation
ngx-pagination copied to clipboard

PaginationControlsComponent does not export paginationApi

Open Flyrell opened this issue 5 years ago • 5 comments

Angular version: 8.2.3

ngx-pagination version: 4.1.0

Description of issue: Default component PaginationControlsComponent does not export the paginationApi.

Expected result: Default component PaginationControlsComponent should, in my opinion, also export the paginationApi. In my case I don't want to bother with the implementation of the whole pagination structure, so I just edited the styles of the default component. Now, I'm not sure if there's any way to actually get access to the API, which would be great in case I'd want to change something based on the pagination state.

Actual result: I'm currently left with only one option, which is to style my entire pagination from scratch.

Of course, I can create a PR to fix the issue. Also, this should not be a breaking change at all. Let me know if this is something you're happy with. Thanks.

Flyrell avatar Nov 07 '19 11:11 Flyrell

Hi! Sure, that sounds like a reasonable feature to add. A PR is welcome!

michaelbromley avatar Nov 07 '19 14:11 michaelbromley

Well, I actually managed to get what I wanted (I wanted the isLastPage) through the paginationService. I was thinking how to implement this issue and I actually have no idea (thought that exportAs works a bit different and I can export whatever I want not the whole component/directive). So I can still help, but I haven't found the pretty way to implement it yet. Do you have something in mind maybe?

<pagination-controls #p="paginationApi"></pagination-controls>

The above would be great, but I guess it's not really possible, or is it?

Flyrell avatar Nov 07 '19 21:11 Flyrell

I just had a play around and discovered something interesting: The pagination-template directive also uses an attribute selector, so you can add it directly onto the <pagination-controls> component:


<pagination-controls (pageChange)="p = $event" pagination-template #api="paginationApi"></pagination-controls>

<button (click)="api.previous()">prev</button>
<button (click)="api.next()">next</button>

Surprisingly it seems to just work like that! Demo: https://stackblitz.com/edit/angular-b2v8ad?file=app/app.component.ts

michaelbromley avatar Nov 08 '19 07:11 michaelbromley

Great, I think the issue can be resolved then. Should we add this to the docs? I can write a PR on Sunday or something.

Flyrell avatar Nov 08 '19 09:11 Flyrell

Yes, I think it's worth adding. It could go as a note with a small code example at the end of the directive section

michaelbromley avatar Nov 08 '19 09:11 michaelbromley