Datasource data is not populating - node.js

Question

I am new babie in Angular (Currently using 14.2.10)
Need to make REST call and populate the data in UI. But I can see only header is populated without any data.
I feel some minor issue (Not able to figure out). In Developer console i can see data is populating. But not in UI.
Please find my html and TS file.
app.component.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let Employees"> {{Employees.name}} </td>
</ng-container>
<!-- position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> Position </th>
<td mat-cell *matCellDef="let Employees"> {{Employees.position}} </td>
</ng-container>
<!-- office Column -->
<ng-container matColumnDef="office">
<th mat-header-cell *matHeaderCellDef> office </th>
<td mat-cell *matCellDef="let Employees"> {{Employees.office}} </td>
</ng-container>
<!-- salary Column -->
<ng-container matColumnDef="salary">
<th mat-header-cell *matHeaderCellDef> salary </th>
<td mat-cell *matCellDef="let Employees"> {{Employees.salary}} </td>
</ng-container>
</table>
app.component.ts
import { Component } from '#angular/core';
import {HttpClient} from '#angular/common/http';
import { MatTableDataSource, MatTableModule } from '#angular/material/table';
import { DataSource } from '#angular/cdk/table';
export interface Employees {
name: string;
position: string;
office:string ;
salary: number;
}
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Sample-App';
li:any;
lis=[];
datasource: any;
displayedColumns: string[] = ['name', 'position', 'office', 'salary'];
constructor(private http : HttpClient){
}
ngOnInit() {
this.http.get('http://www.mocky.io/v2/5ea172973100002d001eeada')
.subscribe(Response => {
console.log(Response)
this.li=Response;
this.lis=this.li.list;
this.datasource = new MatTableDataSource(this.lis);
console.log(this.datasource)
});
}
}
Output :
In Developer mode i can see
Please correct me where i am going wrong.

Answer 1

Your code is fine. See here: Stackblitz
It looks like you need to fix your dependencies. You're using Angular 14.2.10, but Material 13.0 and Material CDK 13.3.9.
EDIT
I updated the Stackblitz, before I was getting the error:
Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.
The URL you provided wasn't secure, so I changed from:
http://www.mocky.io/v2/5ea172973100002d001eeada
to
https://www.mocky.io/v2/5ea172973100002d001eeada
The Stackblitz works fine with the rest of the code you provided.