Conociendo los pipes

Para ver mas sobre los pipe
https://aristotekean.medium.com/tipos-de-pipes-en-angular-d736079491b1

Importante nota: Los pipes no se utilizan en el Typescript van directamente en el html!!!

Tengo experiencia con Angular y estoy haciendo estos cursos como repaso, la importancia de estar atento a nuevas herramientas. No sabía que había un pipe de fechas, particularmente usaba la librería moment(). Algo nuevo que aprendí en la clase 👏👏👏

Pipes

Los pipes son una herramienta de Angular que nos permite transformar visualmente la información, por ejemplo, cambiar un texto a mayúsculas o minúsculas, o darle formato de fecha y hora, formatos numéricos. El valor de la información transformada no cambia, sólo lo hace su aspecto.

Me da la impresión que el video tiene un corte extraño en el minuto 3:00, como si se hubiera cortado una parte de la explicación

Pasos para crear peticiones HTTP

Pasos para crear un servicio de peticiones HTTP

En el servicio:

1. 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 { }

1. 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

1. 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**
  ) { }
}

1. 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.

1. Importar el servicio donde manejaremos nuestro api

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

1. Inyectar el servicio en el constructor: private productsService: ProductsService

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

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

1. 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);
  }**

1. 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);
  }**
}

2050… vienes del futuro, eh?

Se pueden ver todos los pipes disponibles de Angular en la doc oficial:

https://angular.io/api?type=pipe

Importante mencionar que la transformación de los pipe solo es para mostrarla por pantalla, no puedes manipurala transformada, si se utiliza el pipe uppercase, y luego quieres trabajarla en el ts, esta no estará en uppercase en el ts.

Aquí la documentación oficial de Angular donde ofrece más información acerca del tema:

Super los Pipes muy aplicable para nuestros proyectos 😁

Conociendo los pipes

Los pipes en Angular son una herramienta que permite transformar los datos que se muestran en la plantilla de una manera sencilla y flexible. Los pipes se utilizan para formatear, filtrar, ordenar y transformar datos de una variedad de maneras.

En general, los pipes reciben un valor de entrada y lo transforman en un valor de salida, que se muestra en la vista. Los pipes pueden encadenarse, lo que significa que se pueden aplicar varios pipes a la vez, lo que permite transformar aún más los datos.

{{ value | uppercase }}
{{ 'dsa' | uppercase }} => 'DSA'

Algunos de los Pipes mas populares o utiles:

1. {{ value | uppercase }} - Convierte el valor en mayúsculas
2. {{ value | lowercase }} - Convierte el valor en minúsculas
3. {{ value | number }} - Formatea el valor numérico según las convenciones de formato regional
4. {{ value | date }} - Formatea la fecha según las convenciones de formato regional
5. {{ value | currency }} - Formatea el valor numérico como moneda según las convenciones de formato regional
6. {{ value | async }} - Permite trabajar con observables y promesas en la plantilla
7. {{ value | slice }} - Devuelve una parte de una cadena o un array
8. {{ value | json }} - Muestra el objeto como una cadena JSON
9. {{ value | percent }} - Convierte el valor en un porcentaje
10. {{ value | decimal }} - Formatea el valor numérico como decimal

Dejo aqui buena documentación al respecto https://www.acontracorrientech.com/pipes-en-angular-guia-completa/

Documentación de los Pipes: https://angular.io/api/common#pipes

Conociendo los pipes

Los pipes de angular los debemos usar en el HTML, no se utilizan desde TypeScript.