DesconocÃa esa forma de hacer debugging.
Introducción a Angular y Fundamentos
Aprende Angular 17
Creando tu primer proyecto en Angular
Implementando estilos
Mostrando elementos
Property Binding en Angular
Event Binding: click y doble click
Event binding: keydown
Modelo de reactividad con Signals
Creando un Signal en Angular
Estructuras de control en Angular
Directivas de control
Uso de ngFor
ngFor para objetos
Update Tasks
Uso de ngIf
Uso de ngSwitch y ngSwitchDefault
Controlando un input
Manejo de formularios en Angular
Alistando tu aplicación para producción
Estilos al modo Angular
Clases en Angular
Editing mode
Estados compuestos con computed
Usando effect para localStorage
Uso de ngbuild
Despliegue con Firebase Hosting
Nueva sintaxis en Angular
Directivas @For, @switch
Migrando a la nueva sintaxis de Angular v17
Componentes Reutilizables y Comunicación
Construyendo un e-commerce en Angular
Componentes en Angular
Mostrando los componentes
Angular DevTools
Uso de Inputs en Angular
Uso de Outputs en Angular
Componentes para Producto
Ciclo de vida de los componentes
Ciclo de vida de componentes
Ciclo de vida de componentes: ngOnChanges
Ciclo de vida de componentes: ngOnInit
Detectando cambios en los inputs
Evitando memory leaks con ngDestroy
Audio player con ngAfterViewInit
Creando la página "about us" o "conócenos"
Mejorando la interfaz del producto
Creando componente de productos
Creando el Header
Creando el carrito de compras
Comunicación padre e hijo
Calculando el total con ngOnChanges
El problema del prop drilling
Reactividad con signals en servicios
Entendiendo la inyección de dependencias
Integración y Datos
Obteniendo datos una REST API
Importaciones cortas en Typescript
Pipes en Angular
Construyendo tu propio pipe
Utilizando librerÃas de JavaScript en Angular
Conociendo las directivas
Deployando un proyecto en Vercel
Enrutamiento y Navegación
Ruta 404
Uso del RouterLink
Vistas anidadas
Uso del RouterLinkActive
Detalle de cada producto
Obteniendo datos del producto
GalerÃa de imagenes
Detalle de la galerÃa
Perfeccionando tu e-commerce
Mostrando categorias desde la API
Url Params
LazyLoading y Code Splitting
Aplicando LazyLoading
Prefetching
Usando la nueva sintaxis de Angular 17
Lanzando tu aplicación a producción
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Update Tasks
13/71Recursos
Aportes 22
Preguntas 1
Ordenar por:
Les paso algo mas simple de hacer:
<input class="toggle" type="checkbox" [checked]="task.completed" (change)="updateTask(task)" />
y en la action:
updateTask(task: Task) {
task.completed = !task.completed;
}
Debe de ser una gran coincidencia que el código del profesor se parezca al mio 😅
Desde mi punto de vista el contador deberÃa de mostrar las tareas que aún no se han completado, aunque tengamos un array de 10 tareas de las cuales ya se completaron 6, solo restarÃan 4 tareas.
Para hacerlo hice estos cambios: Â countCompletedTasks() {Â Â return *this*.tasks().reduce((pv, cv) => !cv.completed ? pv + 1 : pv, 0);Â }
```js
countCompletedTasks() {
return this.tasks().reduce((pv, cv) => !cv.completed ? pv + 1 : pv, 0);
}
{{countCompletedTasks()}} item left
```
un poquito mas directo :D
en vue lo hacia asi pero luego vi que rompe el principio de la inmutacion jaja
\<input *class*="toggle" *type*="checkbox" *\[checked]*="!task.completed"/>
Que hermosa forma de debugear
**Inmutabilidad**
¿Qué se hace generalmente cuando necesitas un objeto idéntico al original, pero solo con algunos atributos diferentes? Hasta ahora lo que hacÃamos es mutar la variable original y continuar con nuestras vidas. Pero si consideramos esa variable como inmutable entonces tendremos que hacer una copia. Pero ¿crear un objeto nuevo por cada cambio no serÃa costoso? y a la respuesta es: **sÃ, ya que se debe instanciar nuevamente en memoria.**
Es por esto que le debemos dar importancia a la utilización de funciones a la hora de manipular una estructura de datos como los objetos, arreglos, etc...
## ¿Qué herramientas nos ofrece JavaScript?
* Object.assign
`Object.assign` permite crear un nuevo objeto copiando los valores que le son pasados como parámetros.
`Object.assign({}, data, { attribute: 'something' }`
### Operador spread
Este fue el operador que utilizo el profesor en la clase.
`{...data, attribute: 'something' }`
Aquà más información: [¿Qué es Inmutabilidad en JavaScript? (freecodecamp.org)](https://www.freecodecamp.org/espanol/news/que-es-inmutabilidad-en-javascript/)
muy bueno angular, mirando las nueva versión haber que mejoras tiene
esta fe mi solución no se si ahi sobra el evento
updateTask = () => {
*this*.tasks().filter((tasks) => tasks.isCompleted = !tasks.isCompleted)
}
Tengo un problema en el método updateTask en la lÃnea
return this.task.map
Me indica que no reconoce map
Que me falta adiciona?
Adicionalmente para que no me marque error en los parámetros me todo dejar
(task: Task, position: number)
Para que no me solicite el tipo que debo hacer?
Muchas gracias a todos. tengo poca expediencia en Angular.
Mi solución es un poco distinta aprovechando como se controla la inmutabilidad en Redux
```ts
completedTask(index: number): void {
const TASK: iTask = {...this.tasks()[index]}
TASK.completed = !TASK.completed
this.updateTask(TASK)
}
private updateTask(updateTask: iTask): void {
this.tasks.update(tasks => tasks.map(task => task.id === updateTask.id ? updateTask : task))
}
``` completedTask(index: number): void {
const TASK: iTask = {...this.tasks()\[index]}
TASK.completed = !TASK.completed
this.updateTask(TASK)
}
private updateTask(updateTask: iTask): void {
this.tasks.update(tasks => tasks.map(task => task.id === updateTask.id ? {...updateTask} : task))
}
Yo lo habÃa resulto asà ¿está mal?:
changeState(task:Task){
task.completed = !task.completed
console.log(`EL ESTADO ES: ${task.completed}`);
}
Por abstraccion, prefiero actualizar el atributo completed con el valor checked del input, algo asi:
```js
<input class="toggle" type="checkbox" [checked]="task.completed" (change)="updateTask(i, $event)" />
```
```js
updateTask(index: number, event: Event) {
const checkbox = event.target as HTMLInputElement;
this.tasks.update(
(tasks) => {
return tasks.map(
(task, position) => {
if (position === index) {
return {
...task,
completed: checkbox.checked // <= valor real del checkbox
}
}
return task;
}
) // map end
} // update arrow function parameter end
); // update end
}
```
```js
updateTask(index: number) {
this.tasks.update(tasks => {
tasks[index] && (
tasks[index].completed = !tasks[index].completed
)
return tasks
})
}
```
```js
changeHandlerStatus(event: Event, index: number) {
const checkbox = event.target as HTMLInputElement;
const checked = checkbox.checked;
this.tasks.update(tasks => {
const task = tasks[index];
return [
...tasks.slice(0, index),
{ ...task, completed: checked },
...tasks.slice(index + 1)
];
});
}
```
```js
updateTask(index: number) {
this.tasks.update(tasks => {
const task = tasks[index];
return [
...tasks.slice(0, index),
{ ...task, title: 'updated task' },
...tasks.slice(index + 1)
];
});
}
```
Creo que estarÃa mejor actualizar y borrar en base al id de cada task, y no con el index, para tener más consistencia en el código.
Si actualmente tengo una aplicación reactiva usando behaviorSubject, el uso de signals seria un complemento o una forma de reemplazar la clase Rxjs si mi intencion es mejorar el performance de la aplicacion
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?