title: How to add datatable pager template to Angular ngx datatable
body: <p>I am trying to create a custom pagination for swimlane ngx datatable (<a href="https://github.com/swimlane/ngx-datatable" rel="nofollow noreferrer">https://github.com/swimlane/ngx-datatable</a>). </p>
  
  <p>Custom template for the footer is working fine (as per documentation: <a href="http://swimlane.github.io/ngx-datatable/#footer" rel="nofollow noreferrer">http://swimlane.github.io/ngx-datatable/#footer</a>), 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. </p>
  
  <p>Does anyone know, what is the right way to add a custom template to ngx-datatable's datatable pager? </p>
  
  <p>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.</p>
  
  <p>My code is.</p>
  
  <pre><code>&lt;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"
                  &gt;
                      &lt;ngx-datatable-footer&gt;
                          &lt;ng-template
                                  ngx-datatable-footer-template
                                  let-rowCount="rowCount"
                                  let-pageSize="pageSize"
                                  let-selectedCount="selectedCount"
                                  let-curPage="curPage"
                                  let-offset="offset"
                                  let-isVisible="isVisible"&gt;
                              &lt;div class="page-count"&gt;
                                  &lt;span *ngIf="selectedMessage"&gt;
                                    {{selectedCount.toLocaleString()}} {{selectedMessage}} /
                                  &lt;/span&gt;
                                  {{rowCount.toLocaleString()}} {{totalMessage}}
                              &lt;/div&gt;
                              &lt;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) &gt; 1)"
                                      (change)="ngxDatatable.onFooterPage($event)"&gt;
                                  &lt;ng-template&gt;
                                      &lt;ul class="pager"&gt;
                                          &lt;li [class.disabled]="!ngxDatatablePager.canPrevious()" [class.target-p]="true"&gt;
                                              &lt;a
                                                      role="button"
                                                      aria-label="go to first page"
                                                      href="javascript:void(0)"
                                                      (click)="ngxDatatablePager.selectPage(1)"&gt;
  
                                                  &lt;fa-icon    [icon]="['fal', 'angle-left']"
                                                  &gt;&lt;/fa-icon&gt;
                                                  &lt;p&gt;asdklslac&lt;/p&gt;
                                              &lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li [class.disabled]="!ngxDatatablePager.canPrevious()"&gt;
                                              &lt;a
                                                      role="button"
                                                      aria-label="go to previous page"
                                                      href="javascript:void(0)"
                                                      (click)="ngxDatatablePager.prevPage()"&gt;
                                                  &lt;i class="{{pagerLeftArrowIcon}}"&gt;&lt;/i&gt;
                                              &lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li
                                                  role="button"
                                                  [attr.aria-label]="'page ' + pg.number"
                                                  class="pages"
                                                  *ngFor="let pg of pages"
                                                  [class.active]="pg.number === page"&gt;
                                              &lt;a
                                                      href="javascript:void(0)"
                                                      (click)="ngxDatatablePager.selectPage(pg.number)"&gt;
                                                  {{pg.text}}-1
                                              &lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li [class.disabled]="!ngxDatatablePager.canNext()"&gt;
                                              &lt;a
                                                      role="button"
                                                      aria-label="go to next page"
                                                      href="javascript:void(0)"
                                                      (click)="ngxDatatablePager.nextPage()"&gt;
                                                  &lt;i class="{{pagerRightArrowIcon}}"&gt;&lt;/i&gt;
                                              &lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;li [class.disabled]="!ngxDatatablePager.canNext()"&gt;
                                              &lt;a
                                                      role="button"
                                                      aria-label="go to last page"
                                                      href="javascript:void(0)"
                                                      (click)="ngxDatatablePager.selectPage(totalPages)"&gt;
                                                  &lt;i class="{{pagerNextIcon}}"&gt;&lt;/i&gt;
                                              &lt;/a&gt;
                                          &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/ng-template&gt;
                              &lt;/datatable-pager&gt;
                          &lt;/ng-template&gt;
                      &lt;/ngx-datatable-footer&gt;
  
                  &lt;/ngx-datatable&gt;
  </code></pre>
  
  <p>Visual output (PS! the pagination is still default. It is not using my pagination ng-template!):</p>
  
  <p><a href="https://i.stack.imgur.com/jmDpv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jmDpv.png" alt="enter image description here"></a></p>