import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { ProductosService } from '../servicios/productos.service';
import { HttpClient } from '@angular/common/http';

@Component({
   selector: 'productos-list',
   templateUrl: '../views/productos-list.html',
   providers: [ProductosService]
})

export class ProductosListComponent implements OnInit{
   public titulo: string;

   productos=null;

   producto={
     id:null,
     nombre:null,
     descripcion:null,
     precio:null
   }

   constructor(private _route: ActivatedRoute,
        private _router: Router,
        private _productosService: ProductosService){
    this.titulo = 'Listado de productos';

}
ngOnInit(){
    this.recuperarTodos();
}

recuperarTodos(){
    this._productosService.recuperarTodos().subscribe(result => this.productos = result);
}
}

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { ProductosService } from '../servicios/productos.service';
import { HttpClient } from '@angular/common/http';

@Component({
   selector: 'productos-list',
   templateUrl: '../views/productos-list.html',
   providers: [ProductosService]
})

export class ProductosListComponent implements OnInit{
   public titulo: string;

   productos=null;

   producto={
     id:null,
     nombre:null,
     descripcion:null,
     precio:null
   }

   constructor(private _route: ActivatedRoute,
        private _router: Router,
        private _productosService: ProductosService){
    this.titulo = 'Listado de productos';

}
ngOnInit(){
    this.recuperarTodos();
}

recuperarTodos(){
    this._productosService.recuperarTodos().subscribe(result => this.productos = result);
}
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({providedIn: 'root'})

export class ProductosService{
    url='http://localhost:4200/';

    constructor(public _httpClient: HttpClient){

}

    recuperarTodos(){
        return this._httpClient.get(`${this.url}recuperarTodos.php`);
    }
}

<?php
  header('Access-Control-Allow-Origin: *');
  header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-       Type, Accept");

  $db_host="localhost";
  $db_user="root";
  $db_pass="";
  $db_name="curso_angular4";


  $conexion=mysqli_connect($db_host, $db_user, $db_pass, $db_name) or die ("No se puede conectar a la BBDD");
  $conexion -> query("SET NAMES 'UTF8'");

  $instruccion="SELECT id, producto, descripcion, precio FROM productos";
  $consulta=mysqli_query($conexion, $instruccion) or die("No se pudo realizar la consulta");

  while($reg=mysqli_fetch_array($consulta)){
     $vec[]=$reg;
  }

  $cad=json_encode($vec);
  echo $cad;
  header('Content-Type: application/json');
?>