1

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.

1
  • 1
    issue not reproducible stackblitz please replicate the issue and share back! Commented May 15, 2024 at 9:11

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.