La modificación para que no permita editar tareas ya completadas.
Introducción a Angular y Fundamentos
Desarrollo de Aplicaciones Modernas con Angular
Creando tu primer proyecto en Angular
Creación de componentes y rutas en Angular para gestión de tareas
String Interpolation en Angular: Transmisión de Datos a Templates
Modificación de Propiedades HTML con Angular: Property Binding
Eventos en Angular: click, doble click y cambio de input
Eventos de Teclado en JavaScript: Uso de KeyDown y Change
Reactividad Granular con Signals en Angular
Reactividad en HTML: Implementación de Signals en JavaScript
Estructuras de control en Angular
Estructuras de Control y Renderizado Dinámico en Angular
Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación
Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing
Actualización de tareas con Angular y programación inmutable
Uso de ngIf y ngFor para control de flujos en Angular
Pluralización y ngSwitch en Angular para manejo de condiciones múltiples
Manejo Avanzado de Formularios Reactivos en Angular
Validaciones de Inputs en Formularios Reactivos con Angular
Alistando tu aplicación para producción
Validación de formularios y estilos dinámicos en Angular
Activación dinámica de clases en Angular con validaciones
Edición de Tareas Dinámicas en Aplicaciones Web
Estados Computados en Programación Reactiva con Signals
Persistencia de Tareas con LocalStorage en Angular
Compilación y Optimización de Aplicaciones Angular para Producción
Lanzamiento de Aplicaciones con Fiverr Hosting y Angular
Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte
Sintaxis y rendimiento de for y switch en JavaScript moderno
Migración Automática a Nueva Sintaxis de Angular
Componentes Reutilizables y Comunicación
Creación de Tienda en Línea con Angular y Tailwind CSS
Creación y Organización de Componentes en Angular
Componentes Reutilizables en Angular: Creación y Maquetado de Productos
Uso de Angular DevTools para Debugging en Angular
Inputs en Angular: Comunicación de Datos entre Componentes
Outputs en Angular: Comunicación del Hijo al Padre
Maquetación de Galería de Productos con Tailwind CSS
Ciclo de vida de los componentes
Ciclo de Vida de Componentes en Angular
Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación
Ciclo de Vida de Componentes en Angular: Eventos Clave
Detección de Cambios en Inputs con ngOnChange en Angular
Prevención de fugas de memoria con ngOnDestroy en Angular
Creación de un Reproductor de Audio con WaveSurfer.js en Angular
Mejoras de la página About en e-commerce: audio y contador dinámico
Mejorando la interfaz del producto
Componentización y Manejo de Datos en Angular
Creación de Headers en Páginas Web con Angular
Implementación de Interfaz Gráfica para Carrito de Compras Interactivo
Implementación de Reactividad en Carrito de Compras con Angular
Gestión de Carrito de Compras en Angular con ngOnChanges
Gestión de Estado en Angular: Solución al InputDrilling
Gestión de Estado Global en Angular con Servicios y Señales
Inyección de Dependencias en Angular: Conceptos y Prácticas
Integración y Datos
Conexión de Angular a REST API usando Fake Store API de Platzi
Creación de Alias para Imports Cortos en Proyectos JavaScript
Transformación de Datos con Pipes en Angular
Creación y uso de pipes personalizados en Angular
Manipulación de Fechas en Angular con Date Functions
Manipulación del DOM con Directivas en Angular
Deployment de Aplicaciones Angular en Vercel
Enrutamiento y Navegación
Creación de Página 404 en Angular: Manejo de Rutas No Encontradas
Implementación de Router Link en Angular para SPA eficiente
Implementación de Layouts Compartidos en Angular para Vistas Anidadas
Uso de RouterLinkActive en Angular para Navegación Activa
Routing en Angular: Creación de Páginas de Detalle de Producto
Consulta dinámica de detalles de producto con Angular y REST API
Galería de Productos Dinámica con Angular y TypeScript
Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa
Perfeccionando tu e-commerce
Filtrado de Productos por Categoría en E-commerce
Filtros de Productos con Query Params en Angular
Optimización de Aplicaciones con Lazy Loading y Code Splitting
Optimización de JavaScript en Angular con Lazy Loading
Optimización de Carga de Chunks con Preloading en Angular
Migración de Angular a Nueva Sintaxis con ng generate
Despliegue de Aplicaciones con Verzal en Entornos Productivos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Edición de Tareas Dinámicas en Aplicaciones Web
20/71Recursos
¿Cómo marcar una clase como completada de forma dinámica?
Para completar una clase de manera dinámica, necesitas asegurarte de que cada elemento li (lista) tenga la clase "completed" activada solo si la tarea está finalizada. Dado que el estado de una tarea es un booleano, la asignación puede ser directa, reflejándose inmediatamente en la interfaz gracias al uso de programación reactiva con signals. Esto permite que, al marcar una tarea como completada, aparezca una línea de tachado que la distingue visualmente como terminada.
¿Cómo activar el modo de edición en una tarea?
Para activar el modo de edición en una tarea, necesitas asignar una clase dinámica llamada "editing". Esta clase revela un input que permite editar el título de la tarea al hacer doble clic en él. A continuación, te mostramos los pasos para habilitar este modo:
- Usa la clase "editing": Una clase CSS que se activa al entrar en modo de edición.
- Input, visible solo en edición: Define un input que aparece solo al activar el modo de edición.
- Valor dinámico: Asegúrate de que el input tenga un valor que refleje el título actual de la tarea para editar.
En el modelo de tareas (tasks), se puede agregar un estado opcional editing, que indica si una tarea está en modo de edición o no. Este estado se cambia al hacer doble clic sobre una tarea.
Añadir un estado de edición
Define un estado opcional editing en tu modelo de datos para gestionar el modo de edición:
let task = {
title: 'Nombre de la tarea',
completed: false,
editing: false // Estado opcional
};
Este estado ayuda a determinar qué tarea está en edición, para que al hacer doble clic solo actives el input de esa tarea y se oculte el resto.
Método para cambiar entre modos
Añade un método para cambiar el modo de edición al hacer doble clic:
function updateEditingMode(taskIndex) {
tasks.forEach((task, index) => {
task.editing = (index === taskIndex);
});
}
Con este método, al hacer doble clic en una tarea específica, se activa su estado de edición y los demás se desactivan, permitiendo editar una tarea a la vez.
¿Cómo guardar cambios en el título de una tarea?
Al terminar de editar, presiona Enter para guardar cambios. Aquí te mostramos cómo lograrlo:
Capturar el evento Enter
Configura un listener para capturar el evento Enter en el input de edición:
function handleEnterKey(event, taskIndex) {
if (event.key === 'Enter') {
updateTaskTitle(taskIndex, event.target.value);
}
}
Actualizar título y finalizar edición
Crea un método para actualizar el título de la tarea y salir del modo de edición:
function updateTaskTitle(taskIndex, newTitle) {
tasks[taskIndex].title = newTitle;
tasks[taskIndex].editing = false;
}
Este método asegura que el nuevo título se guarda en la tarea específica, y el modo de edición se desactiva al guardar.
Probar la funcionalidad
Finalmente, prueba la funcionalidad verificando que al editar y presionar Enter, el título de la tarea se actualiza correctamente sin perder los estados visuales previos como la línea de tachado si la tarea está completada.
Siguiendo estos pasos, podrás implementar una edición dinámica y eficiente en tus tareas, mejorando la interacción del usuario con la aplicación. La clave está en usar programación reactiva y manipular el DOM de forma dinámica y efectiva. ¡Adelante, sigue practicando y perfecciona tus habilidades en desarrollo web!
Aportes 29
Preguntas 4
Ordenar por:
En que momento del curso cambiaron la lógica del metodo updateTask()
Si google keep deja que yo edite las tareas completadas, voy a hacer lo mismo jaja
La Versión de Angular 17, ya no tiene el metodo mutate sino el metodo update,
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]=“task?.editing” sino esto generará problemas
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...
```html
@for (task of tasks(); track task.id) {
}
```y este es mis eventos validando que cumpla las condiciones de no actualizar con espacios
```js
editTask(id: number) {
console.log(id);
this.tasks.update((tasks) =>
tasks.map((task) =>
task.id === id
? { ...task, editing: true }
: { ...task, editing: false }
)
);
}
updateTask(event: Event, id: number) {
const newtitle = (event.target as HTMLInputElement).value;
this.newTaskControl.setValue(newtitle);
const isvalid = this.newTaskControl.valid;
this.tasks.update((tasks) =>
tasks.map((task) =>
task.id === id
? {
...task,
title: isvalid ? newtitle.trim() : task.title,
editing: false,
}
: task
)
);
}
```
<input
class="toggle"
type="checkbox"
[class.checked]="task.completed"
(click)="toggleChecked(task.id)"
/>
<label>{{ task.title }}</label>
<button class="destroy" (click)="deletetask(task.id)"></button>
<input
class="edit"
[value]="task.title"
(keydown.enter)="updateTask($event, task.id)"
/>
Escribí el médoto de edición si usar map debido a que el objeto modificado tiene referencia en memoria.
```js
//Modo de editar una tarea
editingMode(index: any) {
this.tasksList.update((currentList) => {
//Con el index obtenemos la tarea a editar
const editedTask = currentList[index];
//Modificamos su propiedad editing
editedTask.editing = true; //editedTask tiene referencia en memoria
//Devolvemos la lista actual con el objeto modificado.
return currentList;
});
}
```*//Modo de editar una tarea* editingMode(index: any) { *this*.tasksList.update((currentList) => { *//Con el index obtenemos la tarea a editar* const editedTask = currentList\[index]; *//Modificamos su propiedad editing* editedTask.editing = true; *//editedTask tiene referencia en memoria* *//Devolvemos la lista actual con el objeto modificado.* return currentList; }); }
al remplazar mutate por update el código no me esta funcionando, a alquien mas le paso esto y cómo lo pudo solucionara
Utilizando @for que provee el angular v19, genere las interacciones y mediante la inserción agregue la clase con su condicional.
Una validación para que dentro del input editable se pueda hacer dblclick, para seleccionar una palabra
`if (this.tasks()[index]?.editing || this.tasks()[index]?.completed) return;`
Esta es la forma en la que escribí el método updateTaskEditingMode:
```js
updateTaskEditingMode(index: number){
this.tasks.update((tasks) => tasks.map((task, position) => {
return {...task, editing: position === index ? true : false}
}));
}
``` updateTaskEditingMode(*index*: *number*){ this.tasks.update((*tasks*) *=>* *tasks*.map((*task*, *position*) *=>* { return {...*task*, editing: *position* === *index* ? true : false} })); }
Mi solución para evitar que se edite una tarea completada:
Adicionalmente, agregué una validación para evitar que se agregue texto vacío al editar.
punto interesante: Porque typescript no se queja de que enviamos una clave `text`, si la interfaz especifica que tiene que ser de Task, y Task no tiene esa clave?
Pues, resulta que typescript no valida cuando el mergeamos objetos con spread operator.
Si se utliza clave valor, typescript deberia quejarse.
Mi validación a que no pueda editar una tarea completada
```ts
public updateTaskText(index: number, event: Event) {
const target = event.target as HTMLInputElement;
const value = target.value.trim();
this.tasks.update((tasks) => {
return tasks.map((task, position) => {
if (position === index && task.complated === false) {
return {
...task,
title: value,
editing: false
};
}
alert('Esta tarea ya fue completada');
return task;
});
});
}
```
Mi solución al reto
```ts
public updateTaskEditingMode(index: number) {
this.tasks.update((tasks) => {
return tasks.map((task, position) => {
task.editing = false;
if (position === index) {
return {
...task,
editing: true
};
}
return task;
});
});
}
```
```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
Una solucion simple pero solucion a fin de cuentas
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.
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.
```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:
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.
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
}
}));
}
>
Mi solución para evitar que se editen las tareas completadas y además se evite mostrar el input de edición:
```js
```
<input
class="toggle"
type="checkbox"
[checked]="task.completed"
(change)="completeTask(task.id)"
/>
<label>{{task.title}}</label>
<button class="destroy" (click)="deleteTask(task.id)"></button>
<input class="edit" [value]="task.title" (keydown.enter)="updateTask($event, task.id)"/>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?