I am working on an application where I need to apply a common directive to set the paginations but it is not working for me. Below is the code

Html Code

  <p-table [value]="filteredConsumtionData" appTableConfig>
                        <ng-template pTemplate="header">
                            <tr>
                                <th>Sens</th>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Quantité</th>
                                <th>Description</th>
                                <th>Destinataire</th>
                                <th>Tarif</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-data>
                            <!--List of data-->
                        </ng-template>
                    </p-table>

Directive

import { Directive, Input } from '@angular/core';
import { Table } from 'primeng/table';

@Directive({
  selector: '[appTableConfig]'
})
export class TableConfigDirective {
  @Input() paginator: boolean = true;
  @Input() limit: number = 5;
  @Input() rowsPerPageOptions: number[] = [5, 10, 20];

  constructor(private table: Table) {}

  ngOnInit() {
    if (this.table) {
      this.table.paginator = this.paginator;
      this.table.rows = this.limit;
      this.table.rowsPerPageOptions = this.rowsPerPageOptions;
    }
  }
}

Shared Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TransactionDetailsComponent } from './transaction-details/transaction-details.component';
import { MyFavouritesComponent } from './my-favourites/my-favourites.component';
import { OtpreuseComponent } from './otpreuse/otpreuse.component';
import { PrimengImportsModule } from '../primeng-imports/primeng-imports.module';
import { GenericGridDataDownloadComponent } from './generic-grid-data-download/generic-grid-data-download.component';
import { TableConfigDirective } from '../generic-grid-paginator-directive/TableConfigDirective';
import { TableModule } from 'primeng/table';



@NgModule({
  declarations: [
    TransactionDetailsComponent,
    MyFavouritesComponent,
    OtpreuseComponent,
    GenericGridDataDownloadComponent,
    TableConfigDirective
  ],
  imports: [
    CommonModule,
    PrimengImportsModule,
    TableModule
  ],
  exports: [
    TransactionDetailsComponent,
    MyFavouritesComponent,
    OtpreuseComponent,
    GenericGridDataDownloadComponent
  ]
})
export class SharedComponentsModule { }

The pagination is not working.