[Feature Request]: More flexible footer template customization

[emekaelo]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Entire default footer gets replaced if custom footer template is added

Expected behavior

I want to be able to customize the footer template in a way that I can still use the default footer elements (count & pager). Maybe various ng-contents at before, middle and after positions of the footer template that selects the custom template to be added custom-footer-template-before, custom-footer-template-middle, custom-footer-template-after.

template: `
    <div
      class="datatable-footer-inner"
      [ngClass]="{ 'selected-count': selectedMessage }"
      [style.height.px]="footerHeight"
    >
      <ng-template
        *ngIf="footerTemplate"
        [ngTemplateOutlet]="footerTemplate.template"
        [ngTemplateOutletContext]="{
          rowCount: rowCount,
          pageSize: pageSize,
          selectedCount: selectedCount,
          curPage: curPage,
          offset: offset
        }"
      >
      </ng-template>
      <ng-content select="custom-footer-template-before"></ng-content> <!-- custom template here -->
      <div class="page-count" *ngIf="!footerTemplate">
        <span *ngIf="selectedMessage"> {{ selectedCount?.toLocaleString() }} {{ selectedMessage }} / </span>
        {{ rowCount?.toLocaleString() }} {{ totalMessage }}
      </div>
      <ng-content select="custom-footer-template-middle"></ng-content> <!-- custom template here -->
      <datatable-pager
        *ngIf="!footerTemplate"
        [pagerLeftArrowIcon]="pagerLeftArrowIcon"
        [pagerRightArrowIcon]="pagerRightArrowIcon"
        [pagerPreviousIcon]="pagerPreviousIcon"
        [pagerNextIcon]="pagerNextIcon"
        [page]="curPage"
        [size]="pageSize"
        [count]="rowCount"
        [hidden]="!isVisible"
        (change)="page.emit($event)"
      >
      </datatable-pager>
      <ng-content select="custom-footer-template-after"></ng-content> <!-- custom template here -->
    </div>
  `

Reproduction of the problem

What is the motivation / use case for changing the behavior?

I don't think there's a need to override the entire default footer when I just want to add customizations to that same footer structure. With this feature, I can easily add something like a select element for dynamic page limit.

Please tell us about your environment:

• Table version:

20.1.0

• Angular version:

Angular version 13