Sunday, September 20, 2020
therichposts@gmail.com
Angular 8Angular 9Bootstrap 4MysqlPhp

Angular 9 Php Mysql crud Part 1

Angular 9 Php Mysql Database Crud Part 3 - Delete User

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

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 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.