MatTable not rendering MatTableDataSource data

Question

I am creating a table which hold the server side paged data. However, when I try to render it in MatTable, my data does not show at all. I logged the dataSource and it normally shows the data. This is the code:

data-table.component.html

<div class="card-body mt-3">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- Number Column -->
    <ng-container matColumnDef="tn">
      <th mat-header-cell *matHeaderCellDef> TICKET# </th>
      <td mat-cell *matCellDef="let element"> {{element.tn}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef> TITLE </th>
      <td mat-cell *matCellDef="let element"> {{element.title}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef> DATE </th>
      <td mat-cell *matCellDef="let element"> {{element.create_time}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="product">
      <th mat-header-cell *matHeaderCellDef> PRODUCT </th>
      <td mat-cell *matCellDef="let element"> {{element.product}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="daysFromRegistration">
      <th mat-header-cell *matHeaderCellDef> DAYS SINCE REGISTERED </th>
      <td mat-cell *matCellDef="let element"> {{element.daysFromRegistration}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="analysisDays">
      <th mat-header-cell *matHeaderCellDef> DAYS ANALYSED </th>
      <td mat-cell *matCellDef="let element"> {{element.analysisDays}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="developmentDays">
      <th mat-header-cell *matHeaderCellDef> DAYS IN DEVELOPMENT </th>
      <td mat-cell *matCellDef="let element"> {{element.developmentDays}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="waitOrResponseDays">
      <th mat-header-cell *matHeaderCellDef> DAYS IN WAITING STATE </th>
      <td mat-cell *matCellDef="let element"> {{element.waitOrResponseDays}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="slaDays">
      <th mat-header-cell *matHeaderCellDef> SLA# </th>
      <td mat-cell *matCellDef="let element"> {{element.slaDays}} </td>
    </ng-container>

    <!-- Number Column -->
    <ng-container matColumnDef="user">
      <th mat-header-cell *matHeaderCellDef> AGENT USERNAME </th>
      <td mat-cell *matCellDef="let element"> {{element.user}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

data-table.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Ticket } from 'src/app/model/ticket';
import { TicketService } from 'src/app/services/ticket.service';

@Component({
  selector: 'data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {

  displayedColumns: string[] = ["tn", "title", "date", "product", "daysFromRegistration", "analysisDays", "developmentDays", "waitOrResponseDays", "slaDays", "user"];
  dataSource: MatTableDataSource<Ticket>;

  tickets: Ticket[];

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private ticketService: TicketService) {}

  ngOnInit() {
      this.ticketService.findTickets(0, 25).subscribe(
        (tickets: Ticket[]) => {
          this.dataSource = new MatTableDataSource(tickets);
          console.log(this.dataSource);
        }
      )
  }
}

ticket.service.ts

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Ticket } from '../model/ticket';

@Injectable({
  providedIn: 'root'
})
export class TicketService {

  private ticketUrl: string;

  constructor(private http: HttpClient) {
    this.ticketUrl = 'http://localhost:8080/tickets';
   }

  public findTickets(pageNumber=0, pageSize=10): Observable<Ticket[]> {

    return this.http.get<Ticket[]>(this.ticketUrl, {
      params: new HttpParams()
      .set('page', pageNumber.toString())
      .set('size', pageSize.toString())
    })
  }
}

console.log(dataSource) data is populated normally and is not null

MatTableDataSource {_renderData: BehaviorSubject, _filter: BehaviorSubject, _internalPageChanges: Subject, _renderChangesSubscription: Subscriber, sortingDataAccessor: ƒ, …}
filterPredicate: (data, filter) => {…}
filteredData: {content: Array(24), pageable: {…}, totalElements: 32876, last: false, totalPages: 1316, …}
sortData: (data, sort) => {…}
sortingDataAccessor: (data, sortHeaderId) => {…}
_data: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
_filter: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
_internalPageChanges: Subject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
_renderChangesSubscription: Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …}
_renderData: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
data: (...)
filter: (...)
paginator: (...)
sort: (...)
__proto__: DataSource

console.log(tickets)

{content: Array(10), pageable: {…}, last: false, totalElements: 32878, totalPages: 3288, …}
content: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
empty: false
first: true
last: false
number: 0
numberOfElements: 10
pageable: {sort: {…}, offset: 0, pageNumber: 0, pageSize: 10, unpaged: false, …}
size: 10
sort: {sorted: false, unsorted: true, empty: true}
totalElements: 32878
totalPages: 3288
__proto__: Object

Answer 1

Try this

 ngOnInit() {
      this.ticketService.findTickets(0, 25).subscribe(
        (tickets: Ticket[]) => {
          this.dataSource = new MatTableDataSource(tickets);
          this.SetTableProperties();
        }
      )
  }
SetTableProperties() {
    this.dataSource.paginator = this.paginator;
  }