Monday, May 27, 2024
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 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": [
"scripts": [


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>

<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>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
<div class="container">
  <table class="table table-striped">
      <tr *ngFor="let mydata of data[0]">
<div class="jumbotron text-center" style="margin-bottom:0">


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: [


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';
  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 => {;
    }, 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

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.


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

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