title: Angular Material - table mat-table not rendering data from rest api
body: <p>I have been trying to implement mat-table in angular 8.
  I don't understand what I'm doing wrong, the data which is being provided by my REST endpoint is clearly visible on the console output.</p>
  
  <p>my admin.component.html file</p>
  
  <pre><code>    &lt;table mat-table [dataSource]="dataSource"&gt;
          &lt;!-- &lt;ng-container *ngFor="let value of values;let i=index;"&gt;
              &lt;tr *ngFor ="let row of {{value.rows}};let i = index;"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef&gt;{{row.header}}&lt;/th&gt;
                  &lt;td mat-cell&gt;{{}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/ng-container&gt; --&gt;
  
          &lt;ng-container matColumnDef="position"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef&gt; No.&lt;/th&gt;
                  &lt;td mat-cell *matCellDef="let data"&gt; {{data.position}} &lt;/td&gt;
                &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="USERNAME"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef&gt; USERNAME&lt;/th&gt;
                  &lt;td mat-cell *matCellDef="let data"&gt; {{data.username}} &lt;/td&gt;
                &lt;/ng-container&gt;
  
                &lt;!-- Name Column --&gt;
                &lt;ng-container matColumnDef="BU"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef&gt; BU&lt;/th&gt;
                  &lt;td mat-cell *matCellDef="let data"&gt; {{data.BU}} &lt;/td&gt;
                &lt;/ng-container&gt;
  
                &lt;!-- Weight Column --&gt;
                &lt;ng-container matColumnDef="DURATION"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef&gt; DURATION &lt;/th&gt;
                  &lt;td mat-cell *matCellDef="let data"&gt; {{data.duration}} &lt;/td&gt;
                &lt;/ng-container&gt;
  
                &lt;!-- Symbol Column --&gt;
                &lt;ng-container matColumnDef="PURPOSE"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef&gt; PURPOSE&lt;/th&gt;
                  &lt;td mat-cell *matCellDef="let data"&gt; {{data.remarks}} &lt;/td&gt;
                &lt;/ng-container&gt;
                &lt;ng-container matColumnDef="apr"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;
                           &lt;mat-checkbox (change)="$event ? masterToggle() : null"
                                          [checked]="selection.hasValue() &amp;&amp; isAllSelected()"
                                          [indeterminate]="selection.hasValue() &amp;&amp; !isAllSelected()"
                                          [aria-label]="checkboxLabel()"&gt;
                                  APPROVE&lt;/mat-checkbox&gt;&lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let row" &gt;
                              &lt;mat-checkbox (click)="$event.stopPropagation()"
                                            (change)="$event ? selection.toggle(row) : null"
                                              [checked]="selection.isSelected(row)"
                                              [aria-label]="checkboxLabel(row)"&gt;Approve&lt;/mat-checkbox&gt;
                      &lt;/td&gt;
                    &lt;/ng-container&gt;
  
                    &lt;ng-container matColumnDef="rej"&gt;
                          &lt;th mat-header-cell *matHeaderCellDef&gt; REJECT&lt;/th&gt;
                          &lt;td mat-cell *matCellDef="let row" &gt;
                                  &lt;mat-checkbox &gt;Reject&lt;/mat-checkbox&gt;
                          &lt;/td&gt;
                        &lt;/ng-container&gt;
  
                &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
                &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
                &lt;!-- &lt;tr mat-footer-row *matFooterRowDef&gt;&lt;button mat-button&gt; Submit&lt;/button&gt;&lt;/tr&gt; --&gt;
              &lt;/table&gt;
              &lt;button mat-button color="primary" (click)="OnApprovalSubmit()"&gt;Submit&lt;/button&gt;
  
  
  </code></pre>
  
  <p>my ts file</p>
  
  <pre><code>export interface UserData{
    position:number;
    username:any;
    BU:any;
    duration:any;
    remarks:string;
  
  }
  
  @Component({
    selector: 'app-admin',
    templateUrl: 'admin.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AdminComponent implements OnInit{
    displayedColumns: string[] = ['position','USERNAME', 'BU', 'DURATION', 'PURPOSE','apr','rej'];
    USER_DATA:any;
  
    // approve:any;
    // reject:any;
  
    constructor(public testService : TestService){}
    ngOnInit(){
      this.testService.getUserAccessDetails().subscribe(data =&gt;{
        console.log(data);
        this.USER_DATA=data.USER_DATA;
        console.log(this.USER_DATA);
  
      })
  
    }
  
  
    dataSource = new MatTableDataSource&lt;UserData&gt;(this.USER_DATA);
    // console.log(this.USER_DATA);
    selection = new SelectionModel&lt;UserData&gt;(true, []);
  
    isAllSelected() {
      const numSelected = this.selection.selected.length;
      const numRows = this.dataSource.data.length;
      return numSelected === numRows;
    }
  
    /** Selects all rows if they are not all selected; otherwise clear selection. */
    masterToggle() {
      console.log(this.USER_DATA);
      this.isAllSelected() ?
          this.selection.clear() :
          this.dataSource.data.forEach(row =&gt; this.selection.select(row));
    }
  
    /** The label for the checkbox on the passed row */
    checkboxLabel(row?: UserData): string {
      if (!row) {
        return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
      }
      return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
    }
  
  }
  
  </code></pre>
  
  <p>when the console data it is coming in this format</p>
  
  <pre><code>USER_DATA: Array(1)
  0: {position: "01", username: "NAme", BU: "Team", Duration: 3, remarks: "NA"}
  </code></pre>
  
  <p>but still no rows are getting rendered and there is no error also.
  Any help on this would be appreciated.</p>