angular mat table server side pagination - paginator does not enable

Question

I have a table which data is from the server side (from the parent component to the child component ) the data is pass through input as you can see @Input() properties: any; and it has been loaded as the data source , Now I want to apply server side pagination which I already have an event which is (page)="onChangePage($event)" this will get the event paging and will pass to the parent component which will then call the api. but the issue is as you can see on the screenshot the pagination below or the arrows for paging does not even enable so I cant go to next page currently , I check the code and I am pretty sure it is correct.

What seem to be the issue of my code ? Thanks for any idea or help.

#html code

<table (matSortChange)="sortData($event)" mat-table [dataSource]="dataSource" matSort id="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
        <ng-container matColumnDef={{col.matColumnDef}} *ngFor="let col of gridColumns">
          <th mat-header-cell *matHeaderCellDef cdkDrag mat-sort-header> {{col.columnHeader}} </th>
          <td mat-cell *matCellDef="let row">
              <span *ngIf="col.columnHeader !== 'Property Name'">
                {{(col.value(row) !== 'null')? col.value(row) : '-'}}
              </span>
              <span *ngIf="col.columnHeader === 'Property Name'">
                {{(col.value(row) !== 'null')? col.value(row) : '-'}}
                <br>
                <span class="property-sub-content">{{row.city}}, {{row.state}}</span>
              </span>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getPlaceDetails(row.propertyAccountId)"></tr>
      </table>
    </div>
   <mat-paginator [length]="properties.totalItemCount" [pageSize]="properties.lastItemOnPage" [pageSizeOptions]="[20, 50, 100]" showFirstLastButtons (page)="onChangePage($event)"></mat-paginator>

#ts code snippet

       dataSource = new MatTableDataSource<any>();
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

    @Input() properties: any;

    
    constructor(private iterableDiffers: IterableDiffers, private _route: Router, private _storageService: StorageService) {
        this.iterableDiffer = iterableDiffers.find([]).create(null);
      }
    
      ngDoCheck() {
        let changes = this.iterableDiffer.diff(this.properties);
        if (changes) {
          let dataSource: any;
          dataSource = JSON.stringify(this.properties);
          dataSource = JSON.parse(dataSource);
          dataSource = dataSource.filter(x => x.propertyAccountId);
          this.dataSource.data = dataSource;
    
          if(this.dataSource.data) {
            setTimeout(()=>{this.initFreezeTableHeader();},1000);   
          }
        }
      }
    
      ngAfterViewInit() {
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      
      }
    
      sortData(event) {
        console.log('EVENT' , event)
      }
    
      ngOnInit(): void {    
        const currAcct = this._storageService.getCurrAcct();
        this.currentAccountId = JSON.parse(currAcct).accountId;
        this.accountName = JSON.parse(currAcct).accountName;
        this.gridColumns = PROPERTIES.GRID_COLUMNS[this.accountName];
        this.displayedColumns = this.gridColumns.map(g => g.matColumnDef);   
      }
    
      ngOnDestroy(): void {
        let customDashBoardSelected = document.querySelector('#dashboard-content-container') as HTMLElement | null;
            customDashBoardSelected.style.height = '100%';
      }
    
      drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex);
      }
    
      applyFilter(event: Event) {
        const filterValue = (event.target as HTMLInputElement).value;
        this.dataSource.filter = filterValue.trim().toLowerCase();
      }
    
      getPlaceDetails(propertyAccountId: string) {    
        this._route.navigateByUrl(`/properties/${propertyAccountId}`);
      }
    
      onChangePage(event:any){        
        this.filterProperties.emit(event)
        console.log('event' , event)
      }

#properties data - sample data this is from the parent component this is what I loaded on the datasource of the table

{
    "firstItemOnPage": 1,
    "lastItemOnPage": 20,
    "totalItemCount": 159,
    "items": [
        {
            "id": 4619,
            "propertyName": "A Drug Store",
            "propertyAccountId": "10323202-S",
            "addressLine1": "3255 VICKSBURG LN N",

        },
        {
            "id": 9868,
            "propertyName": "B Drug Store",
            "propertyAccountId": "23210187-S",
            "addressLine1": "900 MAIN AVE",
        },

    ]
}

Answer 1

I don't know if you already find a workaround on this but for me the solution was to set a timeout everytime I fetch data from server with 0ms and there update the paginator.

IE:

this.someRepository.find(this.pageInfo).subscribe({next: (value) => {this.dataSource.data = value;setTimeout(() => {this.paginator.length = "here the total length";this.paginator.pageIndex = "here the current index";})},error: err => {}})