I am trying to create a custom pagination for swimlane ngx datatable (https://github.com/swimlane/ngx-datatable).
Custom template for the footer is working fine (as per documentation: http://swimlane.github.io/ngx-datatable/#footer), and the pagination is also working as expected, but notice that the DOM component has a with custom pager code in it. This is not appearing on the frontend, because it seems that the component does not accept custom templating.
Does anyone know, what is the right way to add a custom template to ngx-datatable's datatable pager?
My specific problem is, that I need to change the default left and right elements to fontawesome components, but maybe I would also like to make some other cosmetic or functional changes there.
My code is.
<ngx-datatable
*ngIf="(files | objectPropertyLikeStringPipe:fileNameLikeDataContract | objectHasTagPipe:searchTags:'tags').length"
class="classic show-overflow"
bbsNgxResizeWatcher
[rowHeight]="undefined"
[columnMode]="'flex'"
(activate)="tableActivate($event)"
[rows]="files | objectPropertyLikeStringPipe:fileNameLikeDataContract | objectHasTagPipe:searchTags:'tags'"
[sorts]="[{prop:'type',dir:'asc'},{prop:'fileName',dir:'asc'}]"
[columns]="columns"
[selected]="selected"
[selectionType]="'checkbox'"
(select)="onSelect($event)"
[limit]="2"
[footerHeight]="50"
>
<ngx-datatable-footer>
<ng-template
ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
let-isVisible="isVisible">
<div class="page-count">
<span *ngIf="selectedMessage">
{{selectedCount.toLocaleString()}} {{selectedMessage}} /
</span>
{{rowCount.toLocaleString()}} {{totalMessage}}
</div>
<datatable-pager
#ngxDatatablePager
[pagerLeftArrowIcon]="'datatable-icon-left'"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
[hidden]="!((rowCount / pageSize) > 1)"
(change)="ngxDatatable.onFooterPage($event)">
<ng-template>
<ul class="pager">
<li [class.disabled]="!ngxDatatablePager.canPrevious()" [class.target-p]="true">
<a
role="button"
aria-label="go to first page"
href="javascript:void(0)"
(click)="ngxDatatablePager.selectPage(1)">
<fa-icon [icon]="['fal', 'angle-left']"
></fa-icon>
<p>asdklslac</p>
</a>
</li>
<li [class.disabled]="!ngxDatatablePager.canPrevious()">
<a
role="button"
aria-label="go to previous page"
href="javascript:void(0)"
(click)="ngxDatatablePager.prevPage()">
<i class="{{pagerLeftArrowIcon}}"></i>
</a>
</li>
<li
role="button"
[attr.aria-label]="'page ' + pg.number"
class="pages"
*ngFor="let pg of pages"
[class.active]="pg.number === page">
<a
href="javascript:void(0)"
(click)="ngxDatatablePager.selectPage(pg.number)">
{{pg.text}}-1
</a>
</li>
<li [class.disabled]="!ngxDatatablePager.canNext()">
<a
role="button"
aria-label="go to next page"
href="javascript:void(0)"
(click)="ngxDatatablePager.nextPage()">
<i class="{{pagerRightArrowIcon}}"></i>
</a>
</li>
<li [class.disabled]="!ngxDatatablePager.canNext()">
<a
role="button"
aria-label="go to last page"
href="javascript:void(0)"
(click)="ngxDatatablePager.selectPage(totalPages)">
<i class="{{pagerNextIcon}}"></i>
</a>
</li>
</ul>
</ng-template>
</datatable-pager>
</ng-template>
</ngx-datatable-footer>
</ngx-datatable>
Visual output (PS! the pagination is still default. It is not using my pagination ng-template!):
