Uso de Pipes en Angular: Transformación y Formatos

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:44

Uso de Pipes en Angular: Transformación y Formatos

Curso de Angular: Componentes y Servicios

Clase 15 de 20

Clase 15 / 20

Recursos

jose zuñiga

Hace 3 años

Pasos para crear peticiones HTTP

Pasos para crear un servicio de peticiones HTTP

En el servicio:

Llamar el modulo de la biblioteca de Angular para poder manejar peticiones HTTP

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
**import { HttpClientModule } from '@angular/common/http';**

@NgModule({
  declarations: [
		...componentes
  ],
  imports: [
		...otros modulos,
    **HttpClientModule**
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Crear el servicio desde la terminal que se dedique a administrar las peticiones a una API. En este caso lo llamaremos products porque vamos a usar una api para obtener productos ficticios

ng g s services/products

Importar del módulo HttpClientModule la función HttpCliente en el servicio products e inyectar el servicio en el constructor. Esta librería nos permite manejar peticiones similares a librerías de REACT como axios.

Para usarlo debemos hacer una inyección de dependencias en nuestro servicio. En este caso el servicio HttpClient se inyecta sobre nuestro servicio products

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

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

  constructor(
    **private http: HttpClient**
  ) { }
}

Ahora podemos acceder al metodo para hace la petición de la API para poder llamarlo cuando desemos se recomienda implementarlo dentro de una función del servicio:

return this.http.get<Product[]>(”https://fakestoreapi.com/products”);

El api genera datos con una serie de datos que por buenas prácticas debe ser estipulada dentro de una interfaz que asigne el tipo de valor esperado. Puedes declararlos dentro de una carpeta models/nombreInterfaz.model.ts la siguiente estructura es la usada como products.model.ts:

id:string;
  title: string;
  price: number;
  description**?**: string;
  category**?**: string;
  image: string;
  rating**?**: {
    "rate": 3.9,
    "count": 120
  }

Nota: Podemos usar ahora la interfaz dentro de los datos obtenidos desde la api para designar el tipo de variable dentro de nuestra petición

import { Injectable } from '@angular/core';
**import { HttpClient } from '@angular/common/http';
import { Product } from '../models/product.model';**

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

  constructor(
    private http: HttpClient
  ) { }
  **getAllProducts(){
    return this.http.get<Product[]>("https://fakestoreapi.com/products");
  }**
}

En el componente:

Ahora podemos llamar el servicio para obtener los datos de los productos. Ten muy en cuenta que se trata de una petición asincrona y debes implementarla dentro de un Hook que pueda trabajar con estas peticiones. La más común es ngOnInit.

Importar el servicio donde manejaremos nuestro api

**import { ProductsService } from 'src/app/services/products.service';**

Inyectar el servicio en el constructor: private productsService: ProductsService

  **constructor (
    private storeService: StoreService,
    private productsApi: ProductsService
  ){**
    this.myShopingCart = this.storeService.getProductsOnCart();
  **}**

  **products : Product[] = [];**

Crear un método que nos permita traer los valores como es una petición asíncrona usaremos el Hook ngOnInit para hacer el llamado.

**ngOnInit(): void{
    this.productsApi.getAllProducts()
      .subscribe(data => this.products = data);
  }**

La libreria del modulo Http tiene un método denominado .subscribe con el vamos a obtener los datos que se han obtenido desde el Json que es la respuesta de la petición.

this.productsApi.getAllProducts()
	**.subscribe(data => this.products = data);**

Este es el script completo:

import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/models/product.model';
import { StoreService } from 'src/app/services/store.service';
**import { ProductsService } from 'src/app/services/products.service';**

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent {
  **constructor (
    private storeService: StoreService,
    private productsApi: ProductsService
  ){**
    this.myShopingCart = this.storeService.getProductsOnCart();
  **}**

  **products : Product[] = [];**

  myShopingCart: Product[] = [];
  countProductOnCart: number = 0;
  totalProductOnCart: number = 0;

  addProductToCart(producto:Product){
    this.myShopingCart = this.storeService.addProductToCart(producto);
    this.countProductOnCart = this.storeService.getCountProductsOnCart();
    this.totalProductOnCart = this.storeService.getTotalProductOnCart();
  }

  **ngOnInit(): void{
    this.productsApi.getAllProducts()
      .subscribe(data => this.products = data);
  }**
}

Brandon Lee Aguero Fernandez

Hace 3 años

Creo que este aporte debería de ir en la anterior clase 😅

Comentarios (18)18 comentarios

Cecilia Riveros

Hace 5 años

Julian Henao Henao

Kevin Bueno

William Ibañez

David Castro

Hace 4 años

Carlos Dugarte

Jimmy Buriticá Londoño

Efrain Montealegre Raga

Diego Nicolás La Faye Arana

Anderson Castellon

Alejandro Mejia Escobar

Emmanuel Jose Lamprea Florez

Ahorra Seguros

Nahuel Soma

Kevin Candia

Darwing Steven Sánchez Londoño

Jully Evangelina Flórez Fonseca

Santiago Velandia Gallo

Platzi Team

Jhan Ronaldo Antezana Yana

Lázaro José Pérez Rodríguez

Miguel Angel Reyes Moreno

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Uso de Pipes en Angular: Transformación y Formatos

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos