ngx-pagination
ngx-pagination copied to clipboard
PaginationControlsComponent does not export paginationApi
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.
Hi! Sure, that sounds like a reasonable feature to add. A PR is welcome!
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?
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
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.
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