3. ProductService + Primera llamada a la API

3.2. Servicio completo

Este es nuestro ProductService en su versión simple: Define el tipo de datos, tiene la URL de la API, inyecta HttpClient y expone un método para cargar productos.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export interface Product {
  _id: string;
  name: string;
  description: string;
  price: number;
  category: string;
  image: string;
  active: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private url = 'https://api.npoint.io/1dee63ad8437c82b24fe';

  constructor(private http: HttpClient) {}

  cargarProductos() {
    return this.http.get<Product[]>(this.url);
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export interface Product {
  _id: string;
  name: string;
  description: string;
  price: number;
  category: string;
  image: string;
  active: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private url = 'https://api.npoint.io/1dee63ad8437c82b24fe';

  constructor(private http: HttpClient) {}

  cargarProductos() {
    return this.http.get<Product[]>(this.url);
  }
}