autoHide doesn't work in custom templates

Angular 2 version: 2.0.0

ng2-pagination version: 0.5.1

Description of issue: autoHide feature doesn’t work while using custom template. I whether get three links — Previous, 1, and Next, or only two — Previous and Next if there are no collection items on a page. So then I added ngIf to my template to check if there are any pages in pagination and got the following: if pagination should be hidden it is hidden, but if it should be shown both mine and default templates are shown.

I use custom pug-template such as:

pagination-controls(ref-pagination autoHide="true")
  nav.text-center(*ngIf="pagination.pages.length > 1" aria-label="Page navigation")

    p hasTemplate: {{pagination.hasTemplate}}

    ul.pagination.pagination-sm

      li([class.disabled]="pagination.isFirstPage()")
        a((click)="pagination.previous()" aria-label="Previous")
          span(aria-hidden="true") «

      li(*ngFor="let page of pagination.pages", [class.active]="pagination.getCurrent() === page.value")
        a([routerLink]="{page: page.label}") {{page.label}}

      li([class.disabled]="pagination.isLastPage()")
        a("(click)"="pagination.next()" aria-label="Next")
          span(aria-hidden="true") »

The hasTemplate is always falsy.

I use paginate pipe such as:

div(*ngFor="let theme of themes | paginate: {itemsPerPage:20, currentPage:p, totalItems: themesTotalCount}")

I get themes from server but not using the async pipe.

With default template autoHide works as expected.

[michaelbromley]

Hi, Thanks for the report. I’ve been thinking about changing the way custom templates are handled. After using this lib in some of my own projects, I found it easier just to wrap the entire PaginationsControlsCmp in my own custom component.

So I am thinking it might be better to offer either a directive or modify the service, to make it simpler to do custom templating. The default template would continue to be available as a component for convenience.

I may get time to work on this later this week.

[michaelbromley]

@badcoder28 Hi, take a look the docs - “autoHide” is not part of the directive API, which only has 2 inputs: “id” and “maxSize”.

In order to get something like “autoHide” in your own custom template, you’ll need to implement it yourself. This is pretty simple. Take a look at how it is done in the default controls component for an idea:

component code

template code