Angular 9 Php Mysql crud Part 1

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Php Mysql crud Part 1.

In this post, I am getting the data from php mysql into angular 9 application.

Here are complete code snippets and commands and please follow carefully:

1. Here are the basics commands to set angular 9 your system:

npm install -g @angular/cli 

ng new angularbootstrap //Create new Angular Project

$ cd angularbootstrap // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. Here is the command to install bootstrap 4 into your angular 9 application:

npm install --save bootstrap

3. Here are the bootstrap 4 css and js path, you need to include into your angular.json file:

"styles": [
        ...
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ...
         ],
"scripts": [
       ...
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ...
       ]

4. Here is the html code, you need to add into your src\app\app.component.html file:

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>Angular 9 Php Mysql Database Crud Part 1</h1>
 
</div>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>
<div class="container">
 
            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let mydata of data[0]">
        <td>{{mydata.id}}</td>
        <td>{{mydata.firstname}}</td>
    <td>{{mydata.email}}</td>
    <td>{{mydata.mobile}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div>

5. Here is the code, you need to add into your app.module.ts file:

Importing HTTPClient module for API calling

...
import { HttpClientModule } from '@angular/common/http';
...
  imports: [
   ...
  HttpClientModule,
   ...
  ],
...

6. Here is the code, you need to add into your app.component.ts file:

Calling data from php file with HTTPClient

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

7. Here is the code for mypage.php file and that must be into your xampp/htdocs folder:

PHP file code, database will be user and table will be userdata

<?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','','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;

In the end please ng serve command and if you have any kind of query the please do comment below.

Jassa

Thank you