0

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.

3
  • the data in table display? Commented Jul 27, 2020 at 17:37
  • I don't know, what you mean ? Commented Jul 27, 2020 at 19:24
  • Did you ever find a solution for sorting? Commented Apr 27, 2022 at 6:31

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, that solved my problem, with pagination, but sorting is still not working.

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.