Clases dinámicas en Angular sin mover el DOM

Esta es la manera en la que solucione el reto 😄

<li
  [class.completed]="task.completed"
  *ngFor="let task of tasks(); index as i"
></li>

Jair Alexander Hernández Rosero

Tambien lo hice de esa manera.

<li *ngFor="let taskP of tasksPractices(); index as i" [class.completed]="taskP.completed === true">
          <div class="view">
            <!-- <input class="toggle" type="checkbox" (click)="markCompleted(i, $event)"/> -->
            <input class="toggle" type="checkbox" (change)="updateTask(i)" [checked]="taskP.completed"/>
            <label>{{ taskP.title }}</label>
            <button class="destroy" (click)="deletedTasks(i)"></button>
          </div>
          <input class="edit" value="Buy a unicorn" />
        </li>

Eduardo Razo Cobián

Mi solución:

Raúl Adolfo Sánchez Rodríguez

Hace 7 meses•editado

Mi solución:

⚫CSS:

.tarea.completed{
  color: #f78888!important;
  text-decoration: line-through;
}

🔵TS;

Ver elemento label: Se activa la clase de arriba si su propiedad "completed" es TRUE

@for (tareita of tasks2(); track $index){
          <li >
            <div class="view">
              <input class="toggle" type="checkbox" (change)="changeCheck($event, $index)" [checked]="tareita.completed"/>
              <label class="tarea" [class.completed]="tareita.completed">{{tareita.title}}</label>
              <button class="destroy" (click)="deleteTask($index)"></button>
            </div>
            <input class="edit" [value]="tareita" />
          </li>
        }

Cindy Melissa Velásquez Sánchez

Mi solución:

JHONATAN AGUILERA GARCIA

Hace 9 meses

Mi solución al reto

<li *ngFor="let task of tasks(); index as i" [ngClass]="{'completed': task.completed }">
                    <div class="view">
                        <input class="toggle" type="checkbox" [checked]="task.completed" (change)="updateTask(i)" />
                        <label>{{ task.title }}</label>
                        <button class="destroy" (click)="deleteTask(i)"></button>
                    </div>
                    <input class="edit" value="Buy a unicorn" />
                </li>

Dario Bublitz

Hace 10 meses•editado

📍Animaciones suaves y UX profesional

Me llevo que combinar clases dinámicas con transiciones CSS permite mostrar mensajes de error de forma suave y profesional, mejorando notablemente la experiencia del usuario sin complicar la lógica.

Dario Bublitz

Hace 10 meses•editado

📍Buena práctica: mostrar errores con clases y CSS

Me llevo que una mejor práctica es mantener el elemento en el DOM y controlar su visibilidad con CSS (por ejemplo opacity) activando una clase como show, evitando movimientos innecesarios en la interfaz.

Dario Bublitz

Hace 10 meses•editado

📍Evitar problemas de usabilidad con ngIf

Me llevo que usar ngIf para mostrar errores puede generar saltos visuales en el formulario, afectando la experiencia del usuario cuando los elementos se mueven al aparecer o desaparecer.

Dario Bublitz

Hace 10 meses•editado

📍Validaciones con FormControl y estilos reactivos

Me llevo que los FormControl exponen propiedades como .invalid y .touched, que pueden usarse para mostrar estados visuales solo cuando el usuario ya interactuó con el input y la validación falla.

Dario Bublitz

Hace 10 meses•editado

📍Manejo dinámico de clases en Angular

Me llevo que Angular permite activar o desactivar clases CSS dinámicamente usando Property Binding con class.nombreClase, lo que da un control mucho más flexible sobre los estilos según el estado del componente.

Jose Pintado

<li class="view" [class.completed]="tarea.completed" *ngFor="let tarea of tareas(); index as i">

Eminson Mendoza

La clase se centró en cómo activar dinámicamente clases en Angular utilizando validaciones en formularios. Se explicó cómo estilizar elementos según su estado (válido o no) utilizando validadores como validators.required y validators.minLength. Para mejorar la usabilidad, se recomendó no mover elementos al mostrar mensajes de error, utilizando en su lugar clases con opacidad. Se implementó una animación suave al cambiar la visibilidad del mensaje de error al aplicar dinámicamente la clase correspondiente. Al final, se propuso un reto sobre la gestión de clases según el estado de una tarea.

Saskia Milagros Cornejo Flores

Comparto mi solución al reto.

Rody Josue Ccoyllo Cule

Les comparto mi solución:

<ul class="todo-list">
          <li [class.completed]="tack.completed" *ngFor="let tack of tacks(); index as i">
            <div class="view">
              <input class="toggle" type="checkbox"  [checked]="tack.completed" (click)="onUpdateTack(i)"/>
              <label>{{tack.title}}</label>
              <button class="destroy" (click)="deleteTack(i)"></button>
            </div>
            <input class="edit" value="Buy a unicorn" />
          </li>
```\<ul class="todo-list">          \<li \[class.completed]="tack.completed" \*ngFor="let tack of tacks(); index as i">            \<div class="view">              \<input class="toggle" type="checkbox"  \[checked]="tack.completed" (click)="onUpdateTack(i)"/>              \<label>{{tack.title}}\</label>              \<button class="destroy" (click)="deleteTack(i)">\</button>            \</div>            \<input class="edit" value="Buy a unicorn" />          \</li>

JHONATAN AGUILERA GARCIA

El reto quedo de la siguiente forma

<ul class="todo-list">
                <li *ngFor="let task of tasks(); index as i" [class.completed]="task.complated">
                    <div class="view">
                        <input class="toggle" type="checkbox" [checked]="task.complated" (change)="updateTask(i)" />
                        <label>{{task.title}}</label>
                        <button class="destroy" (click)="deleteTask(i)"></button>
                    </div>
                    <input class="edit" value="Learn JavaScript" />
                </li>
            </ul>

Sergio Andrés Vargas Pérez

HTML:

CSS:

Sergio Andrés Vargas Pérez

HTML:

CSS:

Israel Flores

Hola que tal, se me esta presentando algo que no entiendo bien, cuando cargo la pagina por primera vez y entro al campo de nombre para lo del error no me muestra el error hasta que salgo del campo, después de eso ya lo hace reactivamente.

FRANZ VILLARROEL CARDENAS

A mi me pasa lo mismo, pero si te fijas creo que el instructor tiene el mismo problema, porque cada vez que hace la validacion primero hace click en el imput de abajo

HECTOR GERARDO LUNA PULIDO

Hola que tal, creo que es justamente la intencion de que no muestre mensajes de error si el usuario no ha ingresado nada. Supongo que sera mala experiencia para el usuario ver todos los carteles rojos si no hizo nada. A mi entender la propiedad touched del reactiveform se debe modificar cuando pierde el foco (click afuera, tab o si lo modificas con codigo). Si me equivoque en algo espero me corrijan saludos!

Danny Alejandro fernandez gallego

<li *ngFor="let toDo of toDo(); index as i" [class.completed]="toDo.completed">

Danny Alejandro fernandez gallego