ngFor para objetos

Este fue el código que use para lograr este resultado

<li
  [class.completed]="task.completed"
  *ngFor="let task of tasks(); index as i"
>
  <div class="view">
    <input
      class="toggle"
      type="checkbox"
      [checked]="task.completed"
      (click)="toggleChecked(i)"
    />
    <label>{{ task.title }}</label>
    <button class="destroy"></button>
  </div>
  <input class="edit" [value]="task.title" />
</li>

toggleChecked(index: number) {
  this.tasks.update((value) =>
    value.map((task, position) => {
      if (position === index)
        return {
          ...task,
          completed: !task.completed,
        };
      return task;
    })
  );
}

Alejandro Vazquez Vazquez

hace 3 meses

Tome el curso de React y para hacer esto mismo haces un tremendo chorizo solo para eliminar y agregar elementos y aquí se siente super intuitivo manipular el dom •**Event Binding**: (click)="clickHandler()" (Paréntesis para eventos) •**Property Binding**: \[disabled]="isDisabled" (Corchetes para propiedades) •**Interpolation**: {{ expression }} (Dobles llaves para interpolar valores) •**$event**: Representa el evento y se usa para pasar información sobre el evento al método que se ejecuta. **Me esta gustando demasiado Angular.**

Jazmin Esquivel Flores

```ts toggleChecked(index: number) { this.tasks.update(tasks => { tasks[index] && ( tasks[index].completed = !tasks[index].completed ) return tasks }) } ``````html <input class="toggle" type="checkbox" [checked]="task.completed" (change)="toggleChecked($index)" /> ```

Johan Grandas

![](https://static.platzi.com/media/user_upload/image-4a4c0e64-93bc-460c-9df4-c2e233e1f8b7.jpg)

Cristian Leiton Valencia

  toggleChecked(index: number) {
    this.tasks.update((tasks) =>
      tasks.map((task, i) =>
        i === index ? { ...task, complete: !task.complete } : task
      )
    );
  }

David Azael Rangel González

hace 4 meses

Hice esto con algo de ayuda: ```jsx //home.component.html <section class="todoapp"> <header class="header">

My Day

All my tasks in one place

</header>

<input class="toggle" type="checkbox" [checked]="task.completed" (change)="changeTaskStatus(i)" /> <label> {{ task.title }} </label> <button class="destroy" (click)="deleteTask(i)"></button>
<input class="edit" value="Learn JavaScript" />

</section> <footer class="footer"> 0 item left

All
Pending
Completed

<button class="clear-completed">Clear completed</button> </footer>

</section> //home.component.ts import { Component, signal } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Task } from './../../models/task.model' @Component({ selector: 'app-home', standalone: true, imports: [CommonModule], templateUrl: './home.component.html', styleUrl: './home.component.css' }) export class HomeComponent { tasks = signal<Task[]>([ { id: Date.now(), title: 'Crear proyecto', completed: false, }, { id: Date.now(), title: 'Crear componentes', completed: false, }, { id: Date.now(), title: 'Crear interfaz', completed: false, }, ]) get incompleteTasks() { return this.tasks().filter(task => !task.completed); } get completeTasks() { return this.tasks().filter(task => !!task.completed); } changeHandler(event: KeyboardEvent) { const input = event.target as HTMLInputElement; if (event.key === 'Enter' && input.value.trim() !== '') { const newTask = input.value.trim() this.addTask(newTask); input.value = ''; } } addTask(title: string) { const newTask = { id: Date.now(), title, completed: false, } this.tasks.update((tasks) => [...tasks, newTask]); } deleteTask(index: number){ this.tasks.update((task) => task.filter((task, position) => position !== index )) } changeTaskStatus(index: number) { this.tasks.update((tasks) => tasks.map((task, i) => i === index ? { ...task, completed: !task.completed }: task ) ) } } ```

Karen Baron

Comparto la pequeña solución que le di, recibo cualquier critica constructiva. `home.html` `<input class="toggle" type="checkbox" (change)="completedTask($event, i)" [checked]="task.completed"/>` `<label [ngClass]="{'completed': task.completed}"> {{ task.title }} </label>` `home.components` `completedTask(event: Event, index: number){ const checkbox = event.target as HTMLInputElement; this.tasks.update((tasks) => {` ` tasks[index].completed = checkbox.checked; return tasks; ` ` }); ` `}`

Anderson Duarte Santos

hace 15 días

Para el reto implemente el siguiente modelo: home.component.ts ```js checkHandler(event: Event, i: number){ const input = event.target as HTMLInputElement; let updateTask: Task = this.tasks()[i]; updateTask.completed = input.checked; this.tasks.update((tasks) => tasks.map((task,position) => { return position === i ? updateTask : task; })) console.log(this.tasks()); } ``` home.component.html ```js <input type="checkbox" class="toggle" (change)="checkHandler($event,i)"> ```

josué

mmmm .... primer drawback con Angular. que pasa, si quiero reutilizar el methodo de `addTask` en otro componente? Como puedo "modularizar esta logica => agregar Task a un Array?

Alejandro Trejo

Esta es mi solución: HTLM: ```js

<input class="toggle" type="checkbox" [checked]="task.completed" (click)="toggleChecked(task)" /> <label>{{ task.title }}</label> <button class="destroy" (click)="deleteTask(i)"></button>

```TS: ```js toggleChecked(task: Task) { this.tasks.update((value) => value.map((item) => { if (item.id == task.id) { item.completed = !item.completed; } return item; }) ); } ```

Alejandro Trejo

Esta es mi solucion HTML: \

\<input class="toggle" type="checkbox" \[checked]="task.completed" (click)="toggleChecked(task)" /> \<label>{{ task.title }}\</label> \<button class="destroy" (click)="deleteTask(i)">\</button> \

\<input class="edit" value="Buy a unicorn" /> \

TS: toggleChecked(*task*: Task) { this.tasks.update((*value*) => *value*.map((*item*) => { if (*item*.id == *task*.id) { *item*.completed = !*item*.completed; } return *item*; }) ); }

Alejandro Trejo

Esta es mi solución. HTML: \

\<input class="toggle" type="checkbox" \[checked]="task.completed" (click)="toggleChecked(task)" /> \<label>{{ task.title }}\</label> \<button class="destroy" (click)="deleteTask(i)">\</button> \

\<input class="edit" value="Buy a unicorn" /> \

```js

<input class="toggle" type="checkbox" [checked]="task.completed" (click)="toggleChecked(task)" /> <label>{{ task.title }}</label> <button class="destroy" (click)="deleteTask(i)"></button>

```TS: ```js toggleChecked(task: Task) { this.tasks.update((value) => value.map((item) => { if (item.id == task.id) { item.completed = !item.completed; } return item; }) ); } ``` toggleChecked(*task*: Task) { this.tasks.update((*value*) => *value*.map((*item*) => { if (*item*.id == *task*.id) { *item*.completed = !*item*.completed; } return *item*; }) ); }

Daniel Bastidas

![](https://static.platzi.com/media/user_upload/image-2838e6aa-891c-4873-8a35-a899d30ee747.jpg)

Sergio Ivan Galvis Esteban

```html //home.component.ts checkCompleted(index: number) { console.log(this.tasks()[index].completed); if (this.tasks()[index].completed) { this.tasks()[index].completed = false; } else { this.tasks()[index].completed = true; } } ```\<input (change)="checkCompleted(i)" class="toggle" type="checkbox" />```html //home.component.html <input (change)="checkCompleted(i)" class="toggle" type="checkbox" /> ```

Sergio Ivan Galvis Esteban

```js //home.component.ts checkCompleted(index: number) { console.log(this.tasks()[index].completed); if (this.tasks()[index].completed) { this.tasks()[index].completed = false; } else { this.tasks()[index].completed = true; } } //home.component.html <input (change)="checkCompleted(i)" class="toggle" type="checkbox" /> ```checkCompleted(index: number) { console.log(this.tasks()\[index].completed); if (this.tasks()\[index].completed) { this.tasks()\[index].completed = false; } else { this.tasks()\[index].completed = true; } }

Sergio Ivan Galvis Esteban

Sergio Ivan Galvis Esteban

```js Se intento! :XD //home.component.html <input (change)="checkCompleted(i)" class="toggle" type="checkbox"/> //home.componet.ts checkCompleted(index: number) { console.log(this.tasks()[index].completed); if (this.tasks()[index].completed) { this.tasks()[index].completed = false; } else { this.tasks()[index].completed = true; } } ``````js Se intento! :XD // <input (change)="checkCompleted(i)" class="toggle" type="checkbox" /> //home.componet.ts checkCompleted(index: number) { console.log(this.tasks()[index].completed); if (this.tasks()[index].completed) { this.tasks()[index].completed = false; } else { this.tasks()[index].completed = true; } } ```Se intento! :XD //home.component.html \<input (change)="checkCompleted(i)" class="toggle" type="checkbox"/> //home.componet.ts checkCompleted(index: number) { console.log(this.tasks()\[index].completed); if (this.tasks()\[index].completed) { this.tasks()\[index].completed = false; } else { this.tasks()\[index].completed = true; } }

Sergio Ivan Galvis Esteban

```js Se intento! :XD // <input (change)="checkCompleted(i)" class="toggle" type="checkbox" /> //home.componet.ts checkCompleted(index: number) { console.log(this.tasks()[index].completed); if (this.tasks()[index].completed) { this.tasks()[index].completed = false; } else { this.tasks()[index].completed = true; } } ```Se intento! :XD //home.component.html \<input (change)="checkCompleted(i)" class="toggle" type="checkbox"/> //home.componet.ts checkCompleted(index: number) { console.log(this.tasks()\[index].completed); if (this.tasks()\[index].completed) { this.tasks()\[index].completed = false; } else { this.tasks()\[index].completed = true; } }

Sergio Ivan Galvis Esteban

Se intento! :XD // \<input (change)="checkCompleted(i)" class="toggle" type="checkbox" /> //home.componet.ts checkCompleted(index: number) { console.log(this.tasks()\[index].completed); if (this.tasks()\[index].completed) { this.tasks()\[index].completed = false; } else { this.tasks()\[index].completed = true; } }

julio cesar valadez castañeda

```js completedTask(event:Event,index:number){ const input = event.target as HTMLInputElement this.tasks()[index].completed = input.checked this.tasks.update((tasks) => this.tasks()) } ```completedTask(event:Event,index:number){ const input = event.target as HTMLInputElement this.tasks()\[index].completed = input.checked this.tasks.update((tasks) => this.tasks()) }

Luis Felipe Moreno Rondon

yo use este código para simpleficar la creación de un task nuevo. `createTask(title : string): Task { return { id: Date.now(), title, completed: false } }` ` tasks = signal<Task[]>([ this.createTask('Create project'), this.createTask('Create component'), ]);` ` changeHandler(event: Event) { const input = event.target as HTMLInputElement; const newTask : Task = this.createTask(input.value); this.tasks.update(tasks => [...tasks, newTask]); }` ` deleteTask(index: number) { this.tasks.update(tasks => { return tasks.filter((task, indexTask) => indexTask !== index); }); }`

ANDRES ALFONSO MIRA MEJIA

✅

Facundo Blanco

```js

<input class="toggle" type="checkbox" (click)="completeTask(i)"/> <label>{{ task.title }}</label> <button class="destroy" (click)="deleteTask(i)"></button>

``` ```txt completeTask(index: number) { this.tasks.update((tasks) => tasks.map((task, position) => { if (position === index) { task.completed = !task.completed; } return task; }) ); } ```

emersonvergara

![](https://static.platzi.com/media/user_upload/image-51a12d5b-e900-4ac1-a949-85fcba1d1963.jpg)

Vicente Alberto Benavides Alcivar