Data from API not displaying in Angular html template

Question

I am trying to load data from back end through API and display in html template. Back-end API is working and can see in console while putting. But in html page, it is not displaying.

My component code like the following,

 selectedinstitution: string;
 selecteddept: string;
 filtertext:string;
 public status:boolean=false;
 public data= new Array();
 institutionalUsers: any;

 displayedColumns = [ 'select','username', 'firstname','lastname'];
 dataSource = new MatTableDataSource<Element>();
 selection = new SelectionModel<Element>(true, []);
 ngOnInit() { 

 this.manageuserService.loadUserListApiMethod()
  .subscribe((data:any)=> {
    this.dataSource.data=[data];
     console.log(data);
  });
}

My html template like the following,

<!-- .......................... DATA TABLE .............................-->             
<div class="table-container mat-elevation-z8" style="margin-top: 10px;" >
        <mat-table #table [dataSource]="dataSource">
                  
                  
                <!-- Checkbox Column -->
                <ng-container matColumnDef="select" >
                  <mat-header-cell style="max-width:50px;" *matHeaderCellDef>
                    <mat-checkbox (change)="$event ? masterToggle() : null"
                                  [checked]="selection.hasValue() && isAllSelected()"
                                  [indeterminate]="selection.hasValue() && !isAllSelected()">
                    </mat-checkbox>
                  </mat-header-cell>
                  <mat-cell style="max-width:50px;" *matCellDef="let row">
                    <mat-checkbox (click)="$event.stopPropagation()"
                                  (change)="$event ? selection.toggle(row) : null"
                                  [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                  </mat-cell>
                </ng-container>
                
                
            <ng-container matColumnDef="username">
              <mat-header-cell *matHeaderCellDef> User Name </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.sUsername}} </mat-cell>
            </ng-container>
            
            <ng-container matColumnDef="firstname">
              <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.sFname}} </mat-cell>
            </ng-container>
    
                <ng-container matColumnDef="lastname">
              <mat-header-cell *matHeaderCellDef>Last Name </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.sLname}} </mat-cell>
                </ng-container>
                
                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;"
                         (click)="selection.toggle(row)">
                </mat-row>                  
        </mat-table> 
          
<!-- .......................... DATA TABLE PAGINATOR ..........................-->  
          <div>
            <mat-paginator #paginator style="height: 45px;"
                [pageSize]="10"
                [pageSizeOptions]="[5, 10, 25, 100]">
            </mat-paginator>
          </div>
        
</div>

Where have I gone wrong?

Answer 1

I think you should reassign dataSource completely instead of mutating the object, for example like this:

subscribe((data: any) => { 
  const source = new MatTableDataSource<Element>()
  source.data = [data];
  this.dataSource = source;
 })