Saturday, December 3, 2022

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.

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 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, 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.