Angular 6 Material Datatables example with Php Mysql data

Here is the updated for this post and please check this link as well:
https://therichpost.com/angular-9-material-datatable-with-php-mysql-data/

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 6 Material Datatables example with Php Mysql data.

Here I am showing the fresh and latest example of Angular 6 Material Datatables example with Php Mysql data and this is very interesting post.

Here is the working picture:

Here are the steps you need to follow for Angular 6 Material Datatables example with Php Mysql data:

1. First you need to run below command into your terminal to include angular material into your angular 6 app:

npm install --save @angular/material @angular/cdk @angular/animations

2. After that, please add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule , MatSortModule, MatPaginatorModule } from "@angular/material";
import {DataSource} from '@angular/cdk/table';
import { CdkTableModule } from '@angular/cdk/table';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  BrowserAnimationsModule,
  MatTableModule,
  HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 3. After that, please add below code into your app.component.ts file:

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource, MatPaginator} from '@angular/material';
import { HttpClient } from '@angular/common/http';
export interface Applications {
  id: number;
  email: string;
  username: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  posts: any;
  public const apps: Applications[] = new Array();
  title = 'my-angular-app';
  
  constructor(private http: HttpClient) {
  this.http.get('http://localhost/mypage.php').subscribe(data => {
  this.apps.push(data);
  this.displayedColumns = ['id', 'email', 'username'];
  this.dataSource = new MatTableDataSource(this.apps[0]);
    }, error => console.error(error));
  }
}

 4. After that, please add below code into your app.component.html file:

<div style="text-align:center">
  <h1>
    Angular6 Material Datatables example with Php Mysql data:
  </h1>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let app"> {{app.id}} </td>
  </ng-container>

  <!-- Email Column -->
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef> Email </th>
    <td mat-cell *matCellDef="let app"> {{app.email}} </td>
  </ng-container>

  <!-- Username Column -->
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> Username </th>
    <td mat-cell *matCellDef="let app"> {{app.username}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</div>

 5. Finally, please add below code into your app.component.css file:

table {
  width: 100%;
}
table th {
  text-align: center;
}

 6. Here is the mypage.php file code:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$conn = new mysqli('localhost','root','root','user');
$sql = "SELECT * FROM userdata";
$result = $conn->query($sql);
$myArr = array();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$myArr[] = $row;
}
} else {
echo "0 results";
}

$myJSON = json_encode($myArr);
echo $myJSON;

 And your done, if you have any query related to this post, then you can questions or comment below.