ngx-bootstrap/src/pagination/pagination.component.html at development · valor-software/ngx-bootstrap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<ul class="pagination" [ngClass]="classMap">
  @if (boundaryLinks()) {
    <li class="pagination-first page-item"
      [class.disabled]="noPrevious() || disabled()">
      <a class="page-link" href (click)="selectPage(1, $event)">
        <ng-container [ngTemplateOutlet]="customFirstTemplate() || defaultFirstTemplate"
          [ngTemplateOutletContext]="{disabled: noPrevious() || disabled(), currentPage: page}">
        </ng-container>
      </a>
    </li>
  }

  @if (directionLinks()) {
    <li class="pagination-prev page-item"
      [class.disabled]="noPrevious() || disabled()">
      <a class="page-link" href (click)="selectPage(page - 1, $event)">
        <ng-container [ngTemplateOutlet]="customPreviousTemplate() || defaultPreviousTemplate"
          [ngTemplateOutletContext]="{disabled: noPrevious() || disabled(), currentPage: page}">
        </ng-container>
      </a>
    </li>
  }

  @for (pg of pages; track pg) {
    <li
      [class.active]="pg.active"
      [class.disabled]="disabled() && !pg.active"
      class="pagination-page page-item">
      <a class="page-link" href (click)="selectPage(pg.number, $event)">
        <ng-container [ngTemplateOutlet]="customPageTemplate() || defaultPageTemplate"
          [ngTemplateOutletContext]="{disabled: disabled(), $implicit: pg, currentPage: page}">
        </ng-container>
      </a>
    </li>
  }

  @if (directionLinks()) {
    <li class="pagination-next page-item"
      [class.disabled]="noNext() || disabled()">
      <a class="page-link" href (click)="selectPage(page + 1, $event)">
        <ng-container [ngTemplateOutlet]="customNextTemplate() || defaultNextTemplate"
          [ngTemplateOutletContext]="{disabled: noNext() || disabled(), currentPage: page}">
        </ng-container>
      </a>
    </li>
  }

  @if (boundaryLinks()) {
    <li class="pagination-last page-item"
      [class.disabled]="noNext() || disabled()">
      <a class="page-link" href (click)="selectPage(totalPages, $event)">
        <ng-container [ngTemplateOutlet]="customLastTemplate() || defaultLastTemplate"
          [ngTemplateOutletContext]="{disabled: noNext() || disabled(), currentPage: page}">
        </ng-container>
      </a>
    </li>
  }
</ul>

<ng-template #defaultPageTemplate let-page>{{ page.text }}</ng-template>

<ng-template #defaultNextTemplate>{{ getText('next') }}</ng-template>

<ng-template #defaultPreviousTemplate>{{ getText('previous') }}</ng-template>

<ng-template #defaultFirstTemplate>{{ getText('first') }}</ng-template>

<ng-template #defaultLastTemplate>{{ getText('last') }}</ng-template>