Cómo Leer Una API con Angular 18

Github

En Angular 18, varias cosas han cambiado.

Para consumir los datos de una API debemos realizar ciertos pasos determinados.

En este tutorial te enseñaré a Cómo Leer Una API con Angular 18, vamos con ello.

Leyendo una API con Angular 18 — Las API permite un consumo rápido de los datos en los dispositivos

Leer API con Angular 18

Sigue los pasos que te brindo a continuación para que todo salga bien:

Creación de Nuevo Proyecto

Creamos un nuevo proyecto usando la Angular CLI.

Ejecutamos el siguiente comando en nuestra terminal o consola de comandos:

ng new leer-api-angular-18 --standalone=false

En el comando anterior le estoy pasando la opción –standalone con el booleano false.

Esto lo hago para tener los archivos y elementos necesarios en el proyecto, ya que Angular 18 no te agrega ciertos elementos al crear un nuevo proyecto.

Por ejemplo si no le pasamos la opción –standalone=false, Angular 18 no me agrega el archivo app.module.ts, entre otros archivos.

Creación de la Interfaz

Ejecutamos el siguiente comando para crear una interfaz:

ng generate interface datos

CREATE src/app/datos.ts (29 bytes)

Creación del Servicio

Ejecutamos el siguiente comando para crear un servicio:

ng generate service datos    
 
CREATE src/app/datos.service.spec.ts (368 bytes)
CREATE src/app/datos.service.ts (143 bytes)

Abre el archivo datos.service.ts y agrega los siguiente:

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

// Importamos la interfaz 'datos'
import { Datos } from './datos'; 

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

  // URL de la API
  private url = 'http://localhost:8000/api/v1';

  constructor(private http: HttpClient) { }

  getDatos(): Observable<Datos[]> {

    // Endpoint de la API
    return this.http.get<Datos[]>(`${this.url}/postres`);

  }
  
}

Configuración del módulo

Abrimos el archivo app.module.ts y agregamos lo siguiente:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Cliente HTTP
import { provideHttpClient } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [provideHttpClient()], // Registramos el cliente HTTP
  bootstrap: [AppComponent]
})
export class AppModule { }

En Angular 18 el módulo HttpClientModule ha sido reemplazado por provideHttpClient().

Configuración del componente

En nuestro archivo app.component.ts agregamos lo siguiente:

import { Component, OnInit } from '@angular/core';

// Importamos la interfaz 'datos'
import { Datos } from './datos';

// Importamos el servicio 'datos'
import { DatosService } from './datos.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent implements OnInit {
  
  datos: Datos[] = []; // Variable datos
  titulo: any; // Tipo para la variable titulo


  // Declaramos el servicio 'DatosService' como privado en el constructor
  constructor(private datosService: DatosService) {}

  ngOnInit(): void {
    
    // Accedemos a los datos usando el servicio 'DatosService' 
    this.datosService.getDatos().subscribe((datos) => {
    this.datos = datos;
    console.log(datos); // Mostramos los datos en la consola

  });

  // Variable titulo
  this.titulo = 'Cómo Leer Una API con Angular 18';

  }

}

Creación del template HTML

En el archivo app.component.html agregamos lo siguiente:

<div class="container mt-5">
  <h2>{{ titulo }}</h2>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Nombre</th>
        <th scope="col">Precio</th>
        <th scope="col">Stock</th>
      </tr>
    </thead>
    <tbody>
      <!-- Iteramos los datos -->
      <tr *ngFor="let dato of datos">
        <th scope="row">{{ dato.id }}</th>
        <td>{{ dato.nombre }}</td>
        <td>{{ dato.precio }}</td>
        <td>{{ dato.stock }}</td>
      </tr>
    </tbody>
  </table>
</div>

Eso es todo, con ello ya podemos leer nuestra API en Angular 18.

Probando la API

Iniciamos el servidor de Angular ejecutando el siguiente comando:

ng serve --open

Initial chunk files | Names         | Raw size
polyfills.js        | polyfills     | 90.23 kB |
main.js             | main          |  5.62 kB |
styles.css          | styles        | 95 bytes |

                    | Initial total | 95.94 kB

Application bundle generation complete. [1.713 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.    
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

Si abrimos la ruta local http://localhost:4200/ en nuestro navegador.

Podemos ver que los datos de la API se muestra correctamente en una bonita tabla HTML: