At the moment, my code is set up to populate a table with data.
In my component.ts file:
import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { MatTableDataSource } from "@angular/material/table";
@Component({
styleUrls: ["./styles.scss"],
templateUrl: "./template.html"
})
export class DisplayEmployeeData {
employeeDataSheet: object;
constructor(private http: HttpClient) {}
ngOnInit() {
this.http
.get("http://localhost:5000/EmployeeData/GetData")
.subscribe(response => {
this.employeeDataSheet = response;
});
}
}
The template.html code structure is as follows:
<mat-card style="height: 98%">
<div style="height: 95%; overflow: auto;">
<table class="StyledTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Date Of Birth</td>
<td>Address</td>
<td>Postcode</td>
<td>Gender</td>
<td>Salary</td>
<td>Job Title</td>
</tr>
</thead>
<tr *ngFor="let info of employeeDataSheet">
<td>{{info.Name}}</td>
<td>{{info.Age}}</td>
<td>{{info.DateOfBirth}}</td>
<td>{{info.Address}}</td>
<td>{{info.Postcode}}</td>
<td>{{info.Gender}}</td>
<td>{{info.Salary}}</td>
<td>{{info.JobTitle}}</td>
</table>
</div>
</mat-card>
Although functional, I find the appearance unattractive. My goal is to implement a mat-table according to https://material.angular.io/components/table/examples
I have made changes in the template.html as follows:
<mat-card style="height: 98%">
<table mat-table [dataSource]="employeeDataSheet" class="mat-elevation-z8">
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef>Name </th>
<td mat-cell *matCellDef="let element"> {{element.Name}} </td>
</ng-container>
<ng-container matColumnDef="DateOfBirth">
<th mat-header-cell *matHeaderCellDef> DateOfBirth </th>
<td mat-cell *matCellDef="let element"> {{element.DateOfBirth}} </td>
</ng-container>
<ng-container matColumnDef="Address">
<th mat-header-cell *matHeaderCellDef> Address </th>
<td mat-cell *matCellDef="let element"> {{element.Address}} </td>
</ng-container>
<ng-container matColumnDef="Postcode">
<th mat-header-cell *matHeaderCellDef> Postcode </th>
<td mat-cell *matCellDef="let element"> {{element.Postcode}} </td>
<ng-container matColumnDef="Gender">
<th mat-header-cell *matHeaderCellDef> Gender </th>
<td mat-cell *matCellDef="let element"> {{element.Gender}} </td>
</ng-container>
<ng-container matColumnDef="Salary">
<th mat-header-cell *matHeaderCellDef> Salary </th>
<td mat-cell *matCellDef="let element"> {{element.Salary}} </td>
</ng-container>
<ng-container matColumnDef="JobTitle">
<th mat-header-cell *matHeaderCellDef> JobTitle </th>
<td mat-cell *matCellDef="let element"> {{element.JobTitle}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-card>
However, upon running this updated code, the screen remains blank without any error messages. What amendments should be made in the template.html and/or component.ts to display the data correctly?