Categories

Wednesday, June 29, 2022
therichposts@gmail.com
Angular 8Angular 9Mysql

Angular 9 with mysql database working example

Angular 9 with mysql database working example

Hello to all, welcome to therichpost.com. Today in this blog post, I am going to tell you, Angular 9 with mysql database working example.

In this post, I am getting the data from pup MySQL database into my angular 9 application and we can use this same code snippet for angular latest versions as well..

Angular 9 with mysql database working example
Angular 9 with mysql database working example
Mysql database working example
Mysql database working example

Guy’s Angular 12 came and if you are new or want to learn more about that then please check below links:

  1. Angular 12 Tutorials.

Here is the complete code snippet and please use carefully:

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

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

ng new angular9phpmyadmindatabse //Install New Angular App

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

cd angular9phpmyadmindatabse //Go inside the Angular 8 Project

 

2. After come inside angular9phpmyadmindatabse folder, please add below code into angular9phpmyadmindatabse\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 angular9phpmyadmindatabse\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 = 'angular9phpmyadmindatabse';
  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 angular9phpmyadmindatabse\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. 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
header('Access-Control-Allow-Origin: *');
 $servername = "localhost";
 $username   = "root";
 $password   = "root";
 $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";
 }

 

Angular MySQL Working

Guy’s in the end, don’t forget to run ng serve command into your terminal to check the output.

Guy’s 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

therichpost
the authortherichpost
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 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

12 Comments

Leave a Reply

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