<pagination-controls> not showing in ng-template

[maheshkumawat24]

I am trying to use pagination inside dataTable rows, where it's having expandable rows. Expandable rows are created with ng-template. This ng-template is having pagination-control. Please have a look at the below code. Quick response is highly appreciated.

=======

Angular version: 6.x

ngx-pagination version:

Description of issue:

Steps to reproduce:

Expected result:

Actual result:

Demo: (if possible, edit this StackBlitz demo and paste the link to your fork)

Any relevant code:

<data-table id="party-agreement" [items]="agreements | paginate: {  itemsPerPage: 5, currentPage: p, id: 'table1' }" [itemCount]="agreementCount"
        [limit]="8" [sortAsc]="true" [substituteRows]="false" [expandableRows]="true" [translations]="translations" [pagination]="false"
        [indexColumn]="false" [selectColumn]="false" [multiSelect]="false" [rowColors]="rowColors" (rowDoubleClick)="rowDoubleClick($event)"
        headerTitle="Party / Account Agreement Lines">

        <ng-template #dataTableExpand let-item="item" let-accounts="item.accountLevelContractsList">
          <table class="table table-striped" style="width:1250px; margin-left:35px">
            <tbody>
              <tr *ngFor="let account of accounts">
                <td class="filterable-cell" style="width:60px; text-align: center">{{account.agreementNumber}}</td>
                <td class="filterable-cell" style="width:180px; text-align: center">{{account.agreementName}}</td>
                <td class="filterable-cell" style="width:80px; text-align: center">{{account.partyName}}</td>
                <td class="filterable-cell" style="width: 50px; text-align: center">{{account.agreementStartDate}}</td>
                <td class="filterable-cell" style="width: 50px; text-align: center">{{account.agreementEndDate}}</td>
                <td class="filterable-cell" style="width: 50px; text-align: center">
                  <span>
                    <span class="fas fa-check-circle" *ngIf="item.agreementStatus == 1" style="color: limegreen;font-size:2em"></span>
                    <span class="fas fa-times-circle" *ngIf="!item.agreementStatus ==1" style="color: red;font-size:2em"></span>
                  </span>
                </td>
              </tr>
            </tbody>

          </table>
          <pagination-controls class="my-pagination" id="table1" (pageChange)="p = $event" maxSize="9" directionLinks="true" autoHide="true"
            previousLabel="Previous" nextLabel="Next" screenReaderPaginationLabel="Pagination" screenReaderPageLabel="page1"
            screenReaderCurrentLabel="You're on page"></pagination-controls>
        </ng-template>

        <data-table-column [property]="'agreementNumber'" [header]="'Agreement #'" [width]="100">
        </data-table-column>
        <data-table-column [property]="'agreementName'" [header]="'Agreement Name'" [width]="180" [resizable]="true">
        </data-table-column>
        <data-table-column [property]="'partyName'" [header]="'Paty Name'" [width]="180" [resizable]="true">
        </data-table-column>
        <data-table-column [property]="'agreementStartDate'" [header]="'Start Date'" [width]="70">
        </data-table-column>
        <data-table-column [property]="'agreementEndDate'" [header]="'End Date'" [width]="70">
        </data-table-column>
        <data-table-column [property]="'agreementStatus'" [header]="'Active'" [width]="60">

          <ng-template #dataTableCell let-item="item">
            <span>
              <span class="fas fa-check-circle" *ngIf="item.agreementStatus == 1" style="color: limegreen;font-size:2em"></span>
              <span class="fas fa-times-circle" *ngIf="!item.agreementStatus ==1" style="color: red;font-size:2em"></span>
            </span>
          </ng-template>
        </data-table-column>

      </data-table>

[maheshkumawat24]

This is working now. Some issues was with the id.

[michaelbromley]

Glad you got it fixed 👍