lunes 24 marzo 2025

Cómo consumir una API en Angular

En Angular, el consumo de una API se realiza con el servicio HttpClient, que permite realizar peticiones HTTP para obtener, enviar o modificar datos desde un servidor externo.

Configurar `HttpClientModule`

Antes de consumir una API, asegúrate de importar HttpClientModule en el módulo principal de tu aplicación (app.module.ts):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'; // Importación necesaria

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule // Se agrega aquí
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Crear un servicio para consumir la API

Genera un servicio para gestionar las peticiones HTTP:

ng generate service api

Luego, edita el archivo api.service.ts:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // URL de la API

  constructor(private http: HttpClient) { }

  obtenerDatos(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

Usar el servicio en un componente

Para consumir la API en un componente, primero impórtalo y agrégalo al constructor:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html',
  styleUrls: ['./mi-componente.component.css']
})
export class MiComponenteComponent implements OnInit {
  datos: any[] = [];

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.obtenerDatos().subscribe(respuesta => {
      this.datos = respuesta;
    });
  }
}

Mostrar los datos en la plantilla

En el archivo mi-componente.component.html, muestra los datos obtenidos de la API:

<ul>
  <li *ngFor="let item of datos">{{ item.title }}</li>
</ul>

Ejemplos de uso

Obtener datos: this.http.get(url)
Enviar datos: this.http.post(url, datos)
Actualizar datos: this.http.put(url, datos)
Eliminar datos: this.http.delete(url)

Etiquetas:

typescript angular

Creado por:

Jorge García

Fullstack developer