Scroll Infinito con Angular 6 y Firestore
Scroll Infinito con Angular 6 y Firestore



En la versión actual de Angular, Angular 5, tenemos a nuestra disposición la clase inyectable HttpClient la cual nos ofrece todos los métodos necesarios para realizar todas las operaciones Http.

En este tutorial vamos a ver lo sencillo que es consumir una API REST con HttpClient de forma completa, haremos uso de los verbos http GET, POST, PUT y DELETE haciendo el envío de Headers personalizados con la clase HttpHeaders.

Consumir API REST con HttpClient y Angular 5

Obviamente, lo primero que necesitamos es una API REST, si no tienes ninguna, no te preocupes, puedes seguir el tutorial Emular API REST con Angular in-memory-web-api para conseguir el mismo resultado en 5 minutos.

Una vez tengas tu API REST lista vamos a crear un servicio llamado users.service.ts para consumirla utilizando la clase HttpClient de Angular 5.

Cómo puedes ver, cada método de la clase devuelve un Observable, que es lo que devuelve la clase HttpClient.

  • El método getUsers() realizará una petición HTTP GET y devolverá un observable de tipo array User con todos los usuarios.
  • El método getUser(id: string) realizará petición HTTP GET y devolverá un Observable de tipo User con la información del usuario encontrado por su id.
  • El método addUser(user: User) realizará petición HTTP POST y enviará el usuario vía para que la API lo dé de alta.
  • El método deleteUser (id: string) realizará petición HTTP DELETE enviando el id del usuario para que sea eliminado por la API.
  • Finalmente el método updateUser (user: User) realizará petición HTTP PUT con los datos del usuario para que sean actualizados.

Cómo puedes ver, los métodos anteriores son los que normalmente utilizamos para realizar operaciones de CRUD haciendo uso de los verbos HTTP de forma correcta.

Utilizando servicios desde componentes en Angular 5

Estoy seguro que si has trabajado anteriormente con Angular 2 o superior este tema ya lo conoces de sobra, pero si no es así, seguro que te interesa.

Para utilizar el servicio que hemos creado anteriormente, lo primero que debes hacer es añadirlo al módulo de tu aplicación que hará uso de él, en mi caso lo voy a añadir al app.module.ts de la siguiente forma.

A través de la clave providers de cualquier módulo de Angular podemos decirle las clases inyectables que queremos utilizar en nuestra app.

Una vez hemos añadido el servicio a providers, podemos inyectarlo en cualquier componente que esté relacionado con el módulo, así que nosotros podemos utilizar perfectamente el componente app.component.ts de la siguiente forma.

Lo único que debemos hacer en este componente es importar el servicio UsersService, después inyectarlo en el constructor para que Angular sepa resolver la dependencia y finalmente utilizarlo cómo estamos haciendo con los métodos que he añadido.

A continuación dejo el código que he utilizado en el archivo app.component.html para consumir todos los métodos del componente y así acceder a los servicios de la API REST con HttpClient.