Cómo Leer Una API con Angular 18

3 minuto(s)

En esta página:

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

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)

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)

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`);

  }
  
}

// 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 { }

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';

  }

}

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>

<h2>{{ titulo }}</h2>

<thead>

<tr>

<th scope="col">Nombre</th>

<th scope="col">Precio</th>

<th scope="col">Stock</th>

</tr>

</thead>

<tbody>

<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