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
18 Hrs
29 Min
56 Seg

Editing mode

19/70
Recursos

Aportes 18

Preguntas 3

Ordenar por:

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

La modificaci贸n para que no permita editar tareas ya completadas.

En que momento del curso cambiaron la l贸gica del metodo updateTask()

La Versi贸n de Angular 17, ya no tiene el metodo mutate sino el metodo update,

Writable signals

const count = signal(0);

// Increment the count by 1.
count.update(value => value + 1);

En que momento cambio tanto el c贸digo , se ve en el c贸digo que no usa update, sino que usa mutate eso no fue explicado ? updateTask tenia una l贸gica y ahora tiene otra, ademas si es una propiedad opcional deber铆a ser [class.editing]=鈥渢ask?.editing鈥 sino esto generar谩 problemas

Si google keep deja que yo edite las tareas completadas, voy a hacer lo mismo jaja

```js updateEditing(index: number){ this.tasks.update(prevState => { return prevState.map((task, position) => { if (position == index && !task.completed){ return { ...task, editing: true }} return { ...task, editing: false } })})} ```As铆 hice para que no se puedan editar tareas completadas
![](https://static.platzi.com/media/user_upload/code-33d562a1-2699-41be-b352-cc3fb0c5c756.jpg)Una solucion simple pero solucion a fin de cuentas
![](https://static.platzi.com/media/user_upload/image-018d0a84-53de-4e33-bf74-4f6178215bbe.jpg)
No s茅 que tan buena idea sea hacerlo de esta manera, de alguna forma se me hizo m谩s simple, y evita iterar innecesariamente todos los elementos, a煤n as铆 dudo que esto sea buena pr谩ctica. ![](https://static.platzi.com/media/user_upload/image-dc292be5-68d4-426e-8a8c-80fd5a2b346e.jpg)
mi soluci贸n para no modificar las tareas completadas:updateTaskEditingMode(index:number){聽 聽 *this*.tasks.update(prevState=> {聽 聽 聽 return 聽prevState.map((task,i)=>{聽 聽 聽 聽 if(i===index && !task.completed){聽 聽 聽 聽 聽 return {聽 聽 聽 聽 聽 聽 ...task,聽 聽 聽 聽 聽 聽 editing: !task.editing聽 聽 聽 聽 聽 }聽 聽 聽 聽 }聽 聽 聽 聽 *//las demas por defecto deben estar en editing mode false*聽 聽 聽 聽 return {聽 聽 聽 聽 聽 ...task,聽 聽 聽 聽 聽 editing: false聽 聽 聽 聽 };聽 聽 聽 });聽 聽 });聽 } ```js updateTaskEditingMode(index:number){ this.tasks.update(prevState=> { return prevState.map((task,i)=>{ if(i===index && !task.completed){ return { ...task, editing: !task.editing } } //las demas por defecto deben estar en editing mode false return { ...task, editing: false }; }); }); } ```
Nicol谩s me perd铆, en que momento cambio el m茅todo updateTask, al cambiar el m茅todo se da帽a todo!! Coloc贸 el mutable y tambi茅n me marca error.
me perdi con este video al ver tantos cambios en la logica. Hice el cambio en updateTask de update a mutate y me da error, lo deje con update y en la aplicacion no se ejecuta la opcion de modificar la tarea...
```js editingTaskMode(index: number, isEditingMode: boolean = true) { if (!isEditingMode) { this.tasks.update(tasks => { tasks[index] && (tasks[index].editing = false) return tasks }) return } this.tasks.update(prevTasks => ( prevTasks.map((task, position) => ({ ...task, editing: position === index })) )) } updateTask(index: number, event: Event) { const titleTask = (event.target as HTMLInputElement).value.trim() titleTask && ( this.tasks.update(tasks => { if (tasks[index]) { tasks[index].title = titleTask tasks[index].editing = false } return tasks }) ) } ``` ```js <input class="edit" [value]="task.title" (keydown.enter)="updateTask($index, $event)" (keydown.escape)="editingTaskMode($index, false)" /> ```
usando un control para la edicion puede quedar de esta forma ```js <input class="edit" [formControl]="editTaskCtrl" (keyup.enter)="onEndEditTask()" (keyup.esc)="escapeEditTask()" /> ``` ```js editTaskCtrl = new FormControl('', {nonNullable: true, validators: [ Validators.required, Validators.pattern('^\\S.*$'), Validators.minLength(3) ]}); onStartEditTask(index: number) { // no se pueden editar las ya completadas if(this.tasks()[index].completed) return; // iniciar modo de edici贸n this.tasks.update( (tasks) => tasks.map( (task, position) => { if(position === index){ this.editTaskCtrl.setValue(task.title); task.editing = true; } else { task.editing = false; } return task; } ) ); } onEndEditTask() { const title = this.editTaskCtrl.value.trim(); if (this.editTaskCtrl.valid && title.length > 0) { this.tasks.update((tasks) => tasks.map( (task, position) => { if (task.editing === true) { task.title = title task.editing = false } return task; } )); } } escapeEditTask() { this.tasks.update( (tasks) => tasks.map( (task, position) => { task.editing = false; return task; } ) ); } ```

Evitar bloques de c贸digo: ![](https://static.platzi.com/media/user_upload/image-d13339be-a5a6-4c75-8f95-d4904c6f6487.jpg)
Hubiera estado genial si en la funci贸n edici贸n hubieramos agregado una flag para "isEditingMode" = false para dar soporte adicional al evento "keydown.escape" para salir del modo de edici贸n y cancelar cualquier valor no confirmado. ![](https://static.platzi.com/media/user_upload/image-d09703d6-c806-42f6-9acc-2bc6ab5323d4.jpg)

Validation to not allow an already completed task to be edited

<updateTaskEditingMode( index: number ) {
    this.tasks.update(( tasks ) => tasks.map(( task, position ) => {
      if ( position === index && !task.completed ) {
        return {
          ...task,
          editing: true
        }
      }
      return {
        ...task,
        editing: false
      }
    }));
  }
>