No Data displayed in table

Question

Hi

  Data has 2 records but it is not displaying in table

<mat-toolbar color="primary">
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
      <mat-icon>menu</mat-icon>
    </button>
    <span>Crud Application</span>
    <span class="example-spacer"></span>
    <button mat-raised-button (click)="openAddEditForm()">
      <!-- <mat-icon>favorite</mat-icon> -->
      ADD EMPLOYEE
    </button>

  </mat-toolbar>

  <mat-form-field>
    <mat-label>Filter</mat-label>
    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
  </mat-form-field>

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>

      <!-- ID Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
      </ng-container>

      <!-- Progress Column -->
      <ng-container matColumnDef="empName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
        <td mat-cell *matCellDef="let row"> {{row.empName}}% </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="empContactNo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Contact No </th>
        <td mat-cell *matCellDef="let row"> {{row.empContactNo}} </td>
      </ng-container>

      <!-- Fruit Column -->
      <ng-container matColumnDef="empEmail">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
        <td mat-cell *matCellDef="let row"> {{row.empEmail}} </td>
      </ng-container>

      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
        <td mat-cell *matCellDef="let row">
          <button mat-icon-button color="primary">
            <mat-icon>Edit</mat-icon>
          </button>
          <button mat-icon-button color="warn">
            <mat-icon>Delete</mat-icon>
          </button>
        </td>
      </ng-container>

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

      <!-- Row shown when there is no matching data. -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
      </tr>
    </table>

    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
  </div>

Markup

Copy

export class LayoutComponent implements OnInit {
  displayedColumns: string[] = ['id', 'empName', 'empContactNo', 'empEmail','action'];
  dataSource!: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(private _dialog:MatDialog){}
  openAddEditForm(){
    this._dialog.open(EmpAddEditComponent)
  }
  ngOnInit(): void {
    this.getallEmployee();
  }

  getallEmployee() {
    this.----.get('onlinetestapi.gerasim.in/api/TeamSync/GetAllEmployee').subscribe((result: any)=>{
    this.dataSource = new MatTableDataSource(result);
    debugger;
    // this.dataSource.sort = this.sort;
    // this.dataSource.paginator = this.paginator;
  })
}
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

JavaScript

Copy

Thanks

Answer 1

Hi Ramco,

try this changes and also Dom Side some changes 

export class LayoutComponent implements OnInit {
  displayedColumns: string[] = ['id', 'empName', 'empContactNo', 'empEmail','action'];
  dataSource!: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(private _dialog:MatDialog){}
  openAddEditForm(){
    this._dialog.open(EmpAddEditComponent)
  }
  ngOnInit(): void {
    this.getallEmployee();
  }

  getallEmployee() {
    this.----.get('onlinetestapi.gerasim.in/api/TeamSync/GetAllEmployee').subscribe((result: any)=>{
    this.dataSource = new MatTableDataSource(result.data);
    debugger;
    // this.dataSource.sort = this.sort;
    // this.dataSource.paginator = this.paginator;
  })
}
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}