Monday, November 30, 2020
therichposts@gmail.com
Angular 9DatatableMysql

Angular 9 Datatable with PHP Mysql Database

angular 9 datatables with custom checkbox selection

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Datatable with PHP Mysql Database.

Angular 9 has just launched and it is in very high in demand. Angular 9 increased his performance speed. I am showing the data in Datatables with custom json data and also for giving good look to datatable, I have used bootstrap in it, here is the working picture and don’t forget to install latest node version.

Angular 9 Datatables Working Example
Angular 9 Datatable Working Example

Here is the complete working code and use this carefully:

1. Here are the basics commands, you need to run for latest angular 9 setup and environment:

$ npm install -g @angular/cli

$ ng new angulardatatables

$ cd angulardatatables

$ ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

 

2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:

npm install jquery --save

npm install datatables.net --save

npm install datatables.net-dt --save

npm install angular-datatables --save

npm install @types/jquery --save-dev

npm install @types/datatables.net --save-dev

npm install ngx-bootstrap bootstrap --save

 

3. After done with commands add below code into you angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
            ],
            "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/bootstrap/dist/js/bootstrap.js",
            ]
...

 

4. Now add below code into your app.module.ts file:

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';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

 

5. Now add below code into app.component.ts file:

In this, I have made API call from where I am getting data from php backend:

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

  title = 'angulardatatables';
  dtOptions: DataTables.Settings = {};
  
  data = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost/employee.php').subscribe(data => {
    this.data = data[0];
    
   
    
    }, error => console.error(error));
  }
  
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
}
}

 

 

6. Now add below code into app.component.html file:

<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>

 

6. Finally for mysql data, please add below code into employee.php file into your htdocs folder and don’t forget to start your XAMPP:

Also make employee database and employeedata table in your phpmyadmin:

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

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

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

  //echo "Connected successfully";
$sql = "SELECT * FROM employeedata";
$result = mysqli_query($conn,$sql); 
$myArray = array();
if ($result->num_rows > 0) {
// output data of each row
    while($row = $result->fetch_assoc()) {
        $myArray[] = $row;
    }
    echo json_encode($myArray);
} 
else 
{
    echo "0 results";
}
?>

 

Don’t forget to run ng serve command to see final output.

Jassa Jatt

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.