Introducci贸n a Angular y Fundamentos

1

Creando tu primer proyecto en Angular

2

Implementando estilos

3

Mostrando elementos

4

Property Binding en Angular

5

Event Binding: click y doble click

6

Event binding: keydown

7

Modelo de reactividad con Signals

8

Creando un Signal en Angular

Estructuras de control en Angular

9

Directivas de control

10

Uso de ngFor

11

ngFor para objetos

12

Update Tasks

13

Uso de ngIf

14

Uso de ngSwitch y ngSwitchDefault

15

Controlando un input

16

Manejo de formularios en Angular

Alistando tu aplicaci贸n para producci贸n

17

Estilos al modo Angular

18

Clases en Angular

19

Editing mode

20

Estados compuestos con computed

21

Usando effect para localStorage

22

Uso de ngbuild

23

Despliegue con Firebase Hosting

24

Nueva sintaxis en Angular

25

Directivas @For, @switch

26

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicaci贸n

27

Construyendo un e-commerce en Angular

28

Componentes en Angular

29

Mostrando los componentes

30

Angular DevTools

31

Uso de Inputs en Angular

32

Uso de Outputs en Angular

33

Componentes para Producto

Ciclo de vida de los componentes

34

Ciclo de vida de componentes

35

Ciclo de vida de componentes: ngOnChanges

36

Ciclo de vida de componentes: ngOnInit

37

Detectando cambios en los inputs

38

Evitando memory leaks con ngDestroy

39

Audio player con ngAfterViewInit

40

Creando la p谩gina "about us" o "con贸cenos"

Mejorando la interfaz del producto

41

Creando componente de productos

42

Creando el Header

43

Creando el carrito de compras

44

Comunicaci贸n padre e hijo

45

Calculando el total con ngOnChanges

46

El problema del prop drilling

47

Reactividad con signals en servicios

48

Entendiendo la inyecci贸n de dependencias

Integraci贸n y Datos

49

Obteniendo datos una REST API

50

Importaciones cortas en Typescript

51

Pipes en Angular

52

Construyendo tu propio pipe

53

Utilizando librer铆as de JavaScript en Angular

54

Conociendo las directivas

55

Deployando un proyecto en Vercel

Enrutamiento y Navegaci贸n

56

Ruta 404

57

Uso del RouterLink

58

Vistas anidadas

59

Uso del RouterLinkActive

60

Detalle de cada producto

61

Obteniendo datos del producto

62

Galer铆a de imagenes

63

Detalle de la galer铆a

Perfeccionando tu e-commerce

64

Mostrando categorias desde la API

65

Url Params

66

LazyLoading y Code Splitting

67

Aplicando LazyLoading

68

Prefetching

69

Usando la nueva sintaxis de Angular 17

70

Lanzando tu aplicaci贸n a producci贸n

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

4 D铆as
20 Hrs
59 Min
24 Seg

Obteniendo datos una REST API

49/70
Recursos

Aportes 16

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

<https://fakeapi.platzi.com/en/rest/products/>
Platzi! Las imagenes de la lista de productos no se est谩n resolviendo, me da un error 404.
en esta pagina puede tomar el json de respuesta de su api y se las traduce a la interface correspondiente seg煤n el lenguaje que seleccionen . <https://app.quicktype.io/>
*Por si tienen problemas al tratar de visualizar las im谩genes es un problema de la api, pero aqu铆 les comparto mi servicio con la soluci贸n para que puedan ver las im谩genes en el front* ```js import { HttpClient } from '@angular/common/http'; import { Injectable, inject } from '@angular/core'; import { map } from 'rxjs/operators'; import { Product } from '../models/product.model'; @Injectable({ providedIn: 'root' }) export class ProductService { private http = inject(HttpClient); constructor() { } getProducts(){ return this.http.get<Product[]>('https://api.escuelajs.co/api/v1/products').pipe( map(products => products.map(product => ({ ...product, images: product.images.map(image => this.cleanAndParseImageUrl(image) ) })) ) ); } private cleanAndParseImageUrl(image: string): string { let cleanedImage = image.replace(/^\["?|"?]$/g, ''); try { cleanedImage = JSON.parse(cleanedImage); } catch (error) { // } return cleanedImage; } } ```*import* { HttpClient } *from* '@angular/common/http';*import* { Injectable, inject } *from* '@angular/core';*import* { map } *from* 'rxjs/operators';*import* { Product } *from* '../models/product.model'; @Injectable({ providedIn: 'root'})*export* class ProductService { private http = inject(HttpClient); constructor() { } getProducts(){ *return* *this*.http.get\<Product\[]>('https://api.escuelajs.co/api/v1/products').pipe( map(products => products.map(product => ({ ...product, images: product.images.map(image => *this*.cleanAndParseImageUrl(image) ) })) ) ); } private cleanAndParseImageUrl(image: string): string { let cleanedImage = image.replace(/*^*\\\["?|"?]*$*/g, ''); *try* { cleanedImage = JSON.parse(cleanedImage); } *catch* (error) { *//* } *return* cleanedImage; }}
esta es la api, [`https://api.escuelajs.co/api/v1/products`](https://api.escuelajs.co/api/v1/products) <https://fakeapi.platzi.com/en/rest/products/> es la documentacion
Gracias Nico, no he visto el curso, pero en mi trabajo inicie una app en angular 17 y estaba intentando conectar a httpclient como se hace en angular 14, prometo verlo completo xD
Hola!! estoy haciendo el curso tal y como lo esta haciendo Nico en los videos pero la API parece no funcionar, tengo todo igual y no me trae los productos a mi app. No se que pueda estar pasando.
En este momento la api tiene problemas en la entrega de im谩genes. Si es al momento de su uso tiene la informaci贸n de esta manera: "images": \[ "\[\\"https://picsum.photos/1100/1100/\\"", "\\"https://picsum.photos/1100/1100\\"]" ] Modifica el servicio mediante un pipe. Basicamente debes tomar la respuesta y aplicarle un filtro para tener el array de imagenes como deberia estar. Te dejo las lineas de c贸digo en un par de clases entender谩s que es un pipe. `import { Injectable, inject, signal } from '@angular/core';` `import { Product } from '../models/product. Model';` `import { HttpClient } from '@angular/common/http';` `import { map } from 'rxjs/operators';` `@Injectable({聽 providedIn: 'root'})` `export class ProductsService {聽 ` `products= signal<Product[]>([]);聽 ` `url: string = "https://api.escuelajs.co/api/v1/products";聽 private http = inject(HttpClient);` `聽 getProducts(){聽 聽 ` `return this.http.get<Product[]>(this.url)` `.pipe(聽 聽 聽 map(products => this.transformProducts(products))聽 聽 );聽 ` `}` `聽 ` `private transformProducts(products: Product[]): Product[] {聽 聽 return products.map(product => {聽 聽 聽 ` `// Realiza la transformaci贸n en cada producto aqu铆聽 聽 聽 const transformedImages = product.images.map(image => {聽 聽 聽 聽 let modifiedImage = image.replace(/"/g, ''); ` `// Elimina comillas dobles聽 聽 聽 聽 ` `modifiedImage = modifiedImage.replace(/\[/g, '').replace(/\]/g, ''); ` `// Elimina corchetes聽 聽 聽 聽 ` `return modifiedImage;聽 聽 聽 });` `聽 聽 聽 return {聽 聽 聽 聽 ...product,聽 聽 聽 聽 ` `images: transformedImages聽 聽 聽 ` `};聽 聽 ` `});聽 ` `}}`
el error es Platzi Fake arreglen su API xd ![](https://static.platzi.com/media/user_upload/image-3987b35c-f49c-4d7b-b434-ae340d4b5177.jpg)
hola A todos he seguido los pasos al pie de la letra y y no renderizan las imagenes
Hay varias extensiones en VS Code que permiten consultar API's desde el editor de c贸digo. **POSTMAN:** ![](https://static.platzi.com/media/user_upload/image-3c6bb7b4-2a4c-4a57-b812-3f7b713b6e3b.jpg) **THUNDER CLIENT:** ![](https://static.platzi.com/media/user_upload/image-5a121929-2e31-4837-997d-eba5f5f4196c.jpg) Ambas son muy buenas y pr谩cticas.
As铆 me sirvio a mi ```js ngOnInit() { this.productService.getProducts() .subscribe({ next: (products) => { this.products.set(products as Product[]); }, error: (error) => { console.log(error); } }); } ``` ngOnInit() { this.productService.getProducts() .subscribe({ next: (products) => { this.products.set(products as Product\[]); }, error: (error) => { console.log(error); } }); }
Aporte (Mostrar im谩genes) Les comparto mi soluci贸n para corregir el error de formato en las im谩genes. ```typescript this.productService.getProducts().subscribe({ next: data => { const items = data.map(x => ({ ...x, images: x.images.map(a => a.replace(/\\\["(.\*)"]/, '$1')), })); this.products.set(items); }, error: error => { console.log(error); }, }); ``` \## Extra Si a alguien no le funciona la funci贸n subscribe como am铆, pueden usar un fetch normal para continuar con el curso. ```typescript fetch('https://api.escuelajs.co/api/v1/products') .then(response => response.json()) .then(data => { // normalize data const items = (data as Product\[]).map(x => ({ ...x, images: x.images.map(a => a.replace(/\\\["(.\*)"]/, '$1')), })); this.products.set(items); }) .catch(error => { console.log(error); }); ``` Yo encontr茅 que `this.products.set(...)` no funciona cuando est谩 dentro del `subscribe`, pero fuera s铆; a煤n no se la causa, si alguien tiene idea de que pasa agradecer铆a el apoyo. ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Hay unos strings de imagenes que estan asi: "[\"https://i.imgur.com/eGOUveI.jpeg\"]" y hacen que de un error a la hora de renderizar la imagen.

Se deber铆a ense帽ar como utilizar tokens y par谩metros, son muy utilizados y requeridos al consumir las APIREST