I'm fetching the records from database using Laravel-api. I successfully show the data into console.log(). But unable to show it to <mat-table> element of Angular Materials.
There is some default information showing inside the mat-table. I want to change it to dynamic users data.
Component.ts
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
export interface PeriodicElement {
name: string;
email: string;
position: number;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', email: '1.0079'},
{position: 13, name: 'Aluminum', email: '26.9815'},
{position: 14, name: 'Silicon', email: '28.0855'},
{position: 15, name: 'Phosphorus', email: '30.9738'},
{position: 16, name: 'Sulfur', email: '32.065'},
{position: 17, name: 'Chlorine', email: '35.453'},
{position: 18, name: 'Argon', email: '39.948'},
{position: 19, name: 'Potassium', email: '39.0983'},
{position: 20, name: 'Calcium', email: '40.078'},
];
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, AfterViewInit {
users:any;
displayedColumns: string[] = ['position', 'name', 'email'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
constructor() { }
ngOnInit(): void {
this.getUsersData();
}
getUsersData() {
this.dataService.getData().subscribe(res => {
this.users = res;
console.log(res);
});
}
}
My View
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> Email </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
The Dataservice.ts file
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http:HttpClient) { }
getData() {
return this.http.get(environment.apiUrl+'/users/');
}
}
The data I'm getting in the console.log(res).
0
:
{id: 1, name: 'Marlen Green', email: 'everett.koch@example.net', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
1
:
{id: 2, name: 'Buck Gaylord I', email: 'ernesto.crona@example.net', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
2
:
{id: 3, name: 'Orlando Trantow', email: 'emerson09@example.com', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
3
:
{id: 4, name: 'Jewell Gibson', email: 'ekoelpin@example.com', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
4
:
{id: 5, name: 'Ramiro Schamberger', email: 'goconnell@example.net', created_at: '2022-09-07T07:09:55.000000Z', updated_at: '2022-09-07T07:09:55.000000Z'}
5
:
{id: 6, name: 'Miss Maudie Steuber III', email: 'durgan.alford@example.org', created_at: '2022-09-07T07:09:56.000000Z', updated_at: '2022-09-07T07:09:56.000000Z'}
6
:
{id: 7, name: 'Allen Bruen', email: 'lucious.hartmann@example.org', created_at: '2022-09-07T07:09:56.000000Z', updated_at: '2022-09-07T07:09:56.000000Z'}
7
:
{id: 8, name: "Efren O'Kon", email: 'cedrick84@example.com', created_at: '2022-09-07T07:09:56.000000Z', updated_at: '2022-09-07T07:09:56.000000Z'}
8
:
{id: 9, name: 'Mrs. Carolyn Lowe', email: 'johnston.alexis@example.org', created_at: '2022-09-07T07:09:56.000000Z', updated_at: '2022-09-07T07:09:56.000000Z'}
9
:
{id: 25, name: 'Muhammad Shahzaib', email: 'media@akc.ae', created_at: '2022-09-08T05:46:19.000000Z', updated_at: '2022-09-08T05:46:19.000000Z'}
10
:
{id: 26, name: 'Muhammad Shahzaib', email: 'shahzaib.chand58@gmail.com', created_at: '2022-09-08T05:52:50.000000Z', updated_at: '2022-09-08T05:52:50.000000Z'}
11
:
{id: 27, name: 'Muhammad Shahzaib', email: 'm.shahzaib3242@gmail.com', created_at: '2022-09-08T05:53:50.000000Z', updated_at: '2022-09-08T05:53:50.000000Z'}
How can I show data from function getUsersdata() into this table.