Problem with Angular Material table - pagination and sort

Question

I creating search tv serial app in Angular with api tvmaze.com. I want display result searcher in Angular Material table, but pagination and sorting not working.

This is my service :

 public getSerials(data: string): Observable<any> {
    return this.httpClient.get(`${this.baseUrl}/search/shows?q=${data}`);
  }

This is my component :

@Component({
  selector: 'app-serials',
  templateUrl: './serials.component.html',
  styleUrls: ['./serials.component.scss'],
})
export class SerialsComponent implements OnInit {
  public inputValue: string = '';
  public dataRequest = [];
  public ready = false;
  public displayedColumns = ['id', 'name', 'genres', 'premiered', 'rating'];
  public dataSource: MatTableDataSource<any>;

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

  constructor(private req: RequestService) {}

  ngOnInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  searchSerials() {
    if (this.inputValue === '') return;

    this.dataRequest = [];
    this.req.getSerials(this.inputValue).subscribe((serials) => {
      serials.forEach((serial) => {
        this.dataRequest.push(serial);
        this.dataSource = new MatTableDataSource(this.dataRequest);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      });
    });
    this.ready = true;
  }

}

This is my view.

<div class="serials">
  <div class="serials__row">
    <h1>Search for a tv serial</h1>
  </div>
  <div class="serials__row">
    <div class="serials__input">
      <mat-form-field class="example-form-field">
        <mat-label>The name of the series</mat-label>
        <input matInput type="text" [(ngModel)]="inputValue" />
      </mat-form-field>
    </div>
    <div class="serials__button">
      <button mat-raised-button color="primary" (click)="searchSerials()">
        Search
      </button>
    </div>
  </div>
  <ng-container *ngIf="ready">
    <div class="serials__table">
      <mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            ID
          </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.show.id }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            TITLE
          </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.show.name }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="genres">
          <mat-header-cell *matHeaderCellDef>
            GENRES
          </mat-header-cell>
          <mat-cell *matCellDef="let row">
            <ul>
              <li *ngFor="let genre of row.show.genres">{{ genre }}</li>
            </ul>
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="premiered">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            PREMIERE DATE
          </mat-header-cell>
          <!-- <mat-cell *matCellDef="let row" [style.color]="row.color"> -->
          <mat-cell *matCellDef="let row">
            {{ row.show.premiered | date: "dd/MM/yyyy" }}
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="rating">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            RATING
          </mat-header-cell>
          <mat-cell *matCellDef="let row">
            {{ row.show.rating.average }}
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"> </mat-row>
      </mat-table>

      <mat-paginator [pageSizeOptions]="[5, 10, 25]"></mat-paginator>
    </div>
  </ng-container>
</div>

I read a lot of solution with similar problem, but there aren't solutuion for me, because I want use paginator and sorting when I get data from request and I cannot use ngOnInit or ngAfterViewInit. In addition, I will say that all imports are correct.

Jobelle Jobelle · Accepted Answer · 2020-07-27T18:21:41

Move the paginator code to outside the *ngif block. Also set the length properly of mat paginator with the number of records.

Problem with Angular Material table - pagination and sort

1 Answers