Tema 2: Consumo de APIs con HttpClient en Angular
✨ Objetivo del documento
Aprender a consumir servicios REST desde Angular usando HttpClient : peticiones GET, POST, PUT y
DELETE. Verás cómo usar servicios, inyectarlos en componentes y mostrar datos en pantalla.
🌐 1. Importar HttpClientModule
Para usar HttpClient , primero hay que importarlo en [Link] :
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule // ⬆️ Agregar esta línea
]
})
export class AppModule { }
🔧 2. Crear un servicio para la API
Creamos un servicio con el CLI:
ng g s servicios/categoria
Esto genera [Link] .
Ejemplo completo de servicio:
// [Link]
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class CategoriaService {
private apiUrl = '[Link]
constructor(private http: HttpClient) {}
obtenerCategorias(): Observable<any[]> {
1
return [Link]<any[]>([Link]); // GET
}
agregarCategoria(categoria: any): Observable<any> {
return [Link]([Link], categoria); // POST
}
actualizarCategoria(id: number, categoria: any): Observable<any> {
return [Link](`${[Link]}/${id}`, categoria); // PUT
}
eliminarCategoria(id: number): Observable<any> {
return [Link](`${[Link]}/${id}`); // DELETE
}
}
📈 3. Usar el servicio en un componente
Supongamos que tenemos el componente CategoriasComponent :
import { Component, OnInit } from '@angular/core';
import { CategoriaService } from '../servicios/[Link]';
@Component({
selector: 'app-categorias',
templateUrl: './[Link]'
})
export class CategoriasComponent implements OnInit {
categorias: any[] = [];
constructor(private categoriaService: CategoriaService) {}
ngOnInit(): void {
[Link]().subscribe(data => {
[Link] = data;
});
}
}
Explicado línea por línea:
• OnInit : interfaz para usar ngOnInit() .
• categoriaService : se inyecta el servicio.
• ngOnInit() : se ejecuta al cargar el componente.
• subscribe() : nos suscribimos al observable para obtener los datos.
2
🖊️ 4. Mostrar los datos en la vista (HTML)
<!-- [Link] -->
<h2>Listado de Categorías</h2>
<table>
<tr>
<th>ID</th>
<th>Nombre</th>
</tr>
<tr *ngFor="let cat of categorias">
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>
</table>
• *ngFor : directiva para iterar sobre la lista.
• {{ [Link] }} : interpolación para mostrar datos.
➕ 5. Agregar una nueva categoría (POST)
Formulario simple:
<!-- formulario dentro de [Link] -->
<input [(ngModel)]="nuevaCategoria" placeholder="Nombre" />
<button (click)="crearCategoria()">Agregar</button>
Y en el componente:
nuevaCategoria = '';
crearCategoria() {
const categoria = { nombre: [Link] };
[Link](categoria).subscribe(() => {
[Link](); // recargar datos
});
}
• [(ngModel)] : binding bidireccional.
• crearCategoria() : llama al servicio y refresca la tabla.
Nota: Para que ngModel funcione, importa FormsModule en [Link] :
import { FormsModule } from '@angular/forms';
@NgModule({ imports: [FormsModule] })
3
✅ Resumen del tema
Ya sabes:
• Cómo consumir una API con Angular.
• Usar GET, POST, PUT, DELETE.
• Mostrar datos y agregar elementos desde la vista.
Esto te prepara para integrar datos reales en tu aplicación y trabajar con componentes conectados al
backend.
