Angular 8Mysql

Angular 8 with mysql database working example

Angular 8 with php tutorial part 2
Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 with mysql database working example.

I have shared many posts related to Angular 8 and you all loved it very much so today I came up with new post related to angular 8 and php mysql database combination.

In this post, I am getting the data from php mysql database to angular 8.

phpmysql data in angular 8
php mysql data in angular 8

Here are complete code snippets and please all this into your files very carefully:

1. Let start, here are the basics commands to set Angular 8 into your pc:

npm install -g @angular/cli //Setup Angular8 atmosphere

ng new angular8phpmyadmindatabse //Install New Angular App

/**You need to update your Nodejs also for this verison**/

cd angular8phpmyadmindatabse //Go inside the Angular 8 Project

 

2. After come inside angular8phpmyadmindatabse folder, please add below code into angular8phpmyadmindatabse\src\app\app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

3. Now add below code into angular8phpmyadmindatabse\src\app\app.component.ts file:

import { Component } 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 = 'angular8phpmyadmindatabse';
  data = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost/employee.php').subscribe(data => {
    this.data.push(data);
    console.log(this.data);
   
    
    }, error => console.error(error));
  }
}

 

4. Now add below code into angular8phpmyadmindatabse\src\app\app.component.html file:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    
  </tr>
  <tr *ngFor="let mydata of data[0]">
    <td>{{mydata.name}}</td>
    <td>{{mydata.email}}</td>
  </tr>

 

5. For good looks, add below code into app.component.css file:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

 

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:

<?php
$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 emplyee";
$result = mysqli_query($conn,$sql); 
$myArray = array();
if ($result->num_rows > 0) {
// output data of each row
    while($row = $result->fetch_assoc()) {
        $myArray[] = $row;
    }
    print json_encode($myArray);
} 
else 
{
    echo "0 results";
}
?>

 

In the end, don’t forget to run ng serve command into your terminal.

If you have any kind of query related to this post or related to Angular then please contact me or comment below.

Jassa Jatt

Angular Expert

Thank you

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

25 Comments

  • I have angular 9 and vs code and chrome and I believe I have set up my example as you have done
    I have added the following line to the top of my sql.php file
    header(‘Access-Control-Allow-Origin: *’, false);

    I’m stuck with a CORS problem, the chrome console says

    Angular is running in the development mode. Call enableProdMode() to enable the production mode.
    localhost/:1 Access to XMLHttpRequest at ‘http://localhost/sql.php’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
    app.component.ts:27 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: “Unknown Error”, url: “http://localhost/sql.php”, ok: false, …}
    (anonymous) @ app.component.ts:27

    Is angular 9 different?

      • This problem turned out to be
        a) I had an incorrect address for the php file in the http.get, it wasn’t a CORS issue at all even though that was the first error message but a 404 error, the second error message (not shown).
        b) I moved the whole project to wwwroot folder. I think my copy of IIS isn’t set right for any other folder.
        Any way, it runs properly now. Thank you.

  • connect_error) {
    die(“Connection failed: ” . $conn->connect_error);
    }

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

  • connect_error) {
    die(“Connection failed: ” . $conn->connect_error);
    }

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

    =====please follow like this======

      • For the employee.php file, where would be the equivalent location to place it in when working without XAMPP? I have a MySQL community server running with MySQL Workbench as the GUI. What would be the right place to put the employee.php when working with my local MySQL community server? There are no htdocs folders anywhere for Workbench?

  • For the employee.php file, I’m using MySQL workbench as an alternative to XAMPP. I have a local MySQL server running on my PC with MySQL workbench as the GUI. How would I go about adding the employee.php file in step 6 to connect to my Angular Live development server? The Angular Live development server is running just fine on its own, its just a blank page with the “Name” and “Email” tabs at the top of the page

  • Extremely helpful code, Thank you! But is there anyway to write back data from angular to php to the db?

Leave a Reply

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

Positive SSL