The issue you’re experiencing, where the data doesn’t render until you interact with the paginator, is likely related to change detection in Angular. Let’s go through some potential solutions:

1. Force Change Detection:
   Since you’re using OnPush change detection strategy, you might need to force change detection when the data is updated. You can do this by injecting ChangeDetectorRef into your component and calling detectChanges() when the data is updated.

import { ChangeDetectorRef } from '@angular/core';

export class TablaPaginadaComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  @Input() set listaObjetos(value: any[]) {
    this._listaObjetos = value;
    this.cdr.detectChanges();
  }
  get listaObjetos(): any[] {
    return this._listaObjetos;
  }
  private _listaObjetos: any[] = [];
}

2. Use ngOnChanges:
   Implement the OnChanges interface to detect when the input properties change:

import { OnChanges, SimpleChanges } from '@angular/core';

export class TablaPaginadaComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    if (changes['listaObjetos']) {
      // Perform any necessary updates
      this.cdr.detectChanges();
    }
  }
}

3. Use async pipe:
   If your data is coming from an Observable, consider using the async pipe in your template:

<table mat-table [dataSource]="listaObjetos | async">
  <!-- ... -->
</table>

4. Trigger change detection in the parent component:
   Ensure that change detection is triggered in the parent component when the data is updated:

import { ChangeDetectorRef } from '@angular/core';

export class ParentComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  updateData() {
    // Update your data
    this.listaObjetos = [...]; // Create a new reference
    this.cdr.detectChanges();
  }
}

5. Use trackBy function:
   Implement a trackBy function to help Angular identify which items have changed:

export class TablaPaginadaComponent {
  trackByFn(index: number, item: any): any {
    return item.id; // Use a unique identifier from your data
  }
}

And in your template:

<table mat-table [dataSource]="listaObjetos" [trackBy]="trackByFn">
  <!-- ... -->
</table>

6. Ensure data is loaded before rendering:
   In the parent component, you might want to ensure that the data is fully loaded before passing it to the child component:

export class ParentComponent implements OnInit {
  listaObjetos: any[] = [];

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    // Your data loading logic here
    this.someService.getData().subscribe(data => {
      this.listaObjetos = data;
      this.cdr.detectChanges();
    });
  }
}

7. Defer rendering:
   You can use *ngIf to defer rendering until the data is available:

<pc-tabla-paginada
  *ngIf="listaObjetos.length > 0"
  [listaObjetos]="listaObjetos"
  ...
></pc-tabla-paginada>

Try implementing these solutions one at a time, starting with forcing change detection (#1) as it’s likely to be the most straightforward fix.

As mentioned in the comment, I also have tried several ways to solve the issue. Here is my implementation for reference:

@Component({
  selector: 'app-paginator',
  standalone: true,
  imports: [
    MatButtonModule,
    MatPaginatorModule,
    StylePaginatorDirective,
    MatIconModule,
  ],
  template: `
    <mat-paginator
      #paginator
      appStylePaginator
      [showTotalPages]="2"
      (page)="handlePageEvent($event)"
      [length]="length"
      [pageSize]="pageSize"
      [disabled]="disabled"
      [showFirstLastButtons]="showFirstLastButtons"
      [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
      [hidePageSize]="hidePageSize"
      [pageIndex]="pageIndex"
      aria-label="Select page"
    >
    </mat-paginator>
  `,
  styles: [
    `
      .mat-mdc-paginator-range-label {
        display: none;
      }

      .mat-mdc-mini-fab {
        --mdc-fab-small-container-shape: 5px;
        margin-right: 1rem;
      }

      .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon {
        fill: rgba(0, 0, 0, 0.2) !important;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
})
export class PaginatorComponent implements OnChanges {
  @Input() length!: number | null;
  @Input() pageSize!: number;
  @Input() pageSizeOptions: number[] = [5, 10, 25, 100];

  pageIndex = 0;
  hidePageSize = true;
  showPageSizeOptions = false;
  showFirstLastButtons = false;
  disabled = false;
  pageEvent!: PageEvent;

  @ViewChild('paginator', { static: true }) paginator!: MatPaginator;

  constructor(private cdr: ChangeDetectorRef) {}

  handlePageEvent(e: PageEvent) {
    this.pageEvent = e;
    this.length = e.length;
    this.pageSize = e.pageSize;
    this.pageIndex = e.pageIndex;
  }

  private triggerInitialPageEvent() {
    // Create an initial PageEvent
    if (this.length === 0 || !this.length) return;
    const initialPageEvent: PageEvent = {
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
      length: this.length,
    };

    // Trigger the handlePageEvent method
    this.paginator.page.emit(initialPageEvent);
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['length'] || changes['pageSize']) {
      setTimeout(() => {
        this.triggerInitialPageEvent();
        this.cdr.detectChanges();
      });
    }
  }
}