Retrieve Data Angular4 PHP

Folder Structure

all_list.php
<?php 
header("Access-Control-Allow-Origin: *");

$dbLink = mysql_connect('localhost','root','');
mysql_select_db('sakila');
$sql = "SELECT * FROM actor";
$result = mysql_query($sql,$dbLink);
$data = array();
while($row = mysql_fetch_array($result)){
$data[] = $row;
}
echo json_encode($data);
?>

app.component.ts

import { Component } from '@angular/core';
import {Http, Response} from '@angular/http';
@Component({
selector: 'app-root',
// templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
template: `
<h1>{{title}}</h1>

<table border = 1>
<tr>
<th>Actor Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr *ngFor="let post of data">
<td>{{post.actor_id}}</td>
<td>{{post.first_name}}</td>
<td>{{post.last_name}}</td>
</tr>
</table>
`,
})
export class AppComponent {
title = 'app works!';
private data;
constructor(private http:Http){}
posts:Object = [];
ngOnInit() {
this.getPosts();
}
getPosts() {
this.http.get('http://localhost/dev2017/angular/ng4-crud/php_code/all_list.php')
        .subscribe(res => this.data = res.json());
};
}

Output

Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.