How to get and show phpmysql data in angularjs2 or 4?

get and show phpmysql data in angularjs2 or 4


Hello, welcome to In this post, I will tell you How to get and show php mysql data in angularjs 2 or 4? Nowadays Angularjs is very popular and known as one page website. I am familiar with Angular 1 very well but Angular 2 is totally different with Angular 1. Angular2 is totally command based. Today we will get mysql in angularjs component and show in angularjs html template.

i am also learning angularjs 2 and 4 and I will also tell you to implement, bootstrap in Angularjs 2 or 4.

i will tell you to get code for mysql data and also tell you how to show this code in angular 2 template.

First please check code in angularjs 2 component and you need to add the code in component(app-simple-form.component.ts):

import { Component, OnInit } from ‘@angular/core’;
import { Http, Response ,RequestOptions,Headers} from ‘@angular/http’;
selector: ‘app-simple-form’,
templateUrl: ‘./simple-form.component.html’,
styleUrls: [‘./simple-form.component.css’]
export class SimpleFormComponent implements OnInit {
posts: any;
constructor(public http: Http) {
// mypage.php that page from where we will get data and I put that file on my root
this.http.get(‘http://localhost/mypage.php’).map(res => res.json()).subscribe(data => {
this.posts = data;
// show data in console

ngOnInit() {

Here is the code to get php data in html format with angular2 directives and you need to add this angularjs 2 html template(simple-form.component.html):

<ul *ngFor=”let data of posts”>
<li>{{ }}</li>
<li>{{ name.firstName }}</li>
<li>{{ name.lastName }}</li>

Here is the code for php and you need to add this in mypage.php file:

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’,’root’,’users’);
$sql = “SELECT * FROM users_tbl”;
$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;

There are many more code in Angular2 and i will let you know all. Please do comment if you any query related to this post. Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to 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.


Leave a Reply

Positive SSL