Site Overlay

How to create a Data Table with Angular 9, PHP REST API, and MySQL Database?

Angular 9 PHP Datatable with MySQL
How to create a Data Table with Angular 9, PHP REST API, and MySQL Database?

What is the exact step by step instructions for creating a data table in Angular 9 that consumes data from a REST API built using PHP and a MySQL database?


Although this is a generic question that can be implemented in various ways depending on your specif use case, these are the steps that you can follow to implement a data-table in Angular 9, PHP and MySQL.


First, you need to install Angular CLI 9 and initialize a project:


$ npm install -g @angular/cli 
$ ng new angular9-php-datatable-example
$ cd angular9-php-datatable-example
$ ng serve

You can navigate to http://localhost:4200/ to see your app running!

Next you need to install the following dependencies from npm:

npm install jquery
npm install
npm install
npm install angular-datatables
npm install @types/jquery
npm install @types/
npm install ngx-bootstrap bootstrap

Next, you need to update angular.jsonĀ as follows:


"styles": [
            "scripts": [


This will enable integrating bootstrap and jquery with your Angular app.

Next, you need to import the following modules in your src/app/app.module.ts file as follows:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


Finally, we can create our data table in the src/app/app/component.ts file as follows:


import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {

  dataTableOpts: DataTables.Settings = {};
  data = [];
  constructor(private httpClient: HttpClient) {
    this.httpClient.get('http://localhost/customers.php').subscribe(data => { = data[0];  
    }, error => console.error(error));
  ngOnInit() {
    this.dataTableOpts = {
      pagingType: 'full_numbers',
      pageLength: 10,
      processing: true

Next, openĀ  the src/app/app/component.html file and update it as follows:


<table class="table" datatable [dtOptions]="dataTableOpts">
      <th>Full Name</th>
   <tr *ngFor="let d of data">


Finally, create a MySQL database and implement the following PHP REST API:

header("Access-Control-Allow-Origin: *");
$servername = "localhost";
$username   = "root";
$password   = "root";
$dbname     = "mydb";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);

$sql = "SELECT * FROM customers";
$result = mysqli_query($conn,$sql); 
$myArray = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $myArray[] = $row;
    echo json_encode($myArray);
    echo "None";