In angular 7 , How do I populate a mat-table with a data from an object
12,822
You need to make these changes.
In component.ts:
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";
import { Object} from "../object.model";
@Component({
styleUrls: ["./styles.scss"],
templateUrl: "./template.html"
})
export class MyRouteData implements OnInit {
employeeInfoTable : Object[] = [];
employeeInfoTableDataSource = new MatTableDataSource(this.employeeInfoTable);
displayedColumns: string[] = [
"Name",
"DateOfBirth",
"Address",
"Postcode",
"Gender",
"Salary"
"JobTitle"
];
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get("http://localhost:5000/MyRoute/GetEmployeeInfo")
.subscribe(response => {
this.employeeInfoTable = response;
this.employeeInfoTableDataSource.data = this.employeeInfoTable;
});
}
}
In object.model.ts
export interface Object{
id: number;
Name: string;
DateOfBirth: Date;
Address: string;
Postcode: string;
Gender: string;
Salary : number;
JobTitle : string;
}
In your .html
<mat-card style="height: 98%">
<table mat-table [dataSource]="employeeInfoTableDataSource" 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>
Author by
Woody
Updated on July 28, 2022Comments
-
Woody almost 2 years
Currently I have the following code to populate a table.
In component.ts:
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 MyRouteData { employeeInfoTable: object; constructor(private http: HttpClient) {} ngOnInit() { this.http .get("http://localhost:5000/MyRoute/GetEmployeeInfo") .subscribe(response => { this.employeeInfoTable = response; }); } }
My template.html file looks like this:
<mat-card style="height: 98%"> <div style="height: 95%; overflow: auto;"> <table class="MyNiceStyle"> <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 data of employeeInfoTable"> <td>{{data.Name}}</td> <td>{{data.Age}}</td> <td>{{data.DateOfBirth}}</td> <td>{{data.Address}}</td> <td>{{data.Postcode}}</td> <td>{{data.Gender}}</td> <td>{{data.Salary}}</td> <td>{{data.JobTitle}}</td> </table> </div> </mat-card>
which works but honestly, it looks terrible. What I would like to do is to use a mat-table: https://material.angular.io/components/table/examples
I've updated the template.html to:
<mat-card style="height: 98%"> <table mat-table [dataSource]="employeeInfoTable" 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>
and when I run this I just see a blank screen. There are no console errors or anything like that. What changes do I need to make to template.html and/or
component.ts
to get the data to show? -
Woody over 5 yearsOn line this.employeeInfoTable = new MatTableDataSource<any>([...response]);; I get a "Type 'Object' is not an array type" error.
-
Woody over 5 yearsI am going to mark this as the answer but all I had to add was : public displayedColumns = ['Name', 'DateOfBirth', 'address', 'Postcode', 'Gender', 'Salary', 'JobTitle']; I didn't need to do (2). Thank-you
-
Learning over 5 years@Woody. For your Type error: this.employeeInfoTable = new MatTableDataSource<Object>([...response]). And for the second suggestion: It will only be required if any row wise operation is required. For example: sorting, filtering etc.