<h1>To Do List</h1>
<input #newTodo>
<button (click)="addTodo(newTodo.value)">Add Todo</button>

<ul>
  <li *ngFor="let todo of todos">{{todo.title}}</li>
</ul>

export class AppComponent implements OnInit {
  title = 'todo-app';
  todos:any;
  

  constructor(private service:TodoService) {}

  ngOnInit() {
    this.service.getTodos()
    .subscribe(response => {
      this.todos = response;
      console.log(this.todos)
    })
  }

  
  
  addTodo(title: string){
    
    this.todos.push({
      userId: 1, 
      title, completed: false
      
      
    });
    console.log(this.todos)
  }

This is the code so far, would really appreciate help :D

I have tried going on youtube and several other websites to find a solution, but nothing has worked.

CodePudding user response：

Use ngClass directive. Drive it through true/false.

CodePudding user response：

StackBlitz demo

<h1>To Do List</h1>
<input #newTodo>
<button (click)="addTodo(newTodo.value)">Add Todo</button>

<ul>
  <li *ngFor="let todo of todos">{{todo.title}}</li>
</ul>

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'todo-app';
  todos: { title: string; userId: number; completed: boolean }[];

  ngOnInit() {
    of([{ title: 'one', userId: 0, completed: false }]).subscribe(
      (response) => {
        this.todos = response;
        console.log(this.todos);
      }
    );
  }

  addTodo(title: string) {
    this.todos.push({
      userId: 1,
      title,
      completed: false,
    });
    console.log(this.todos);
  }

  markAsDone(todo: { title: string; userId: number; completed: boolean }) {
    todo.completed = true;
  }
}

p {
  font-family: Lato;
}

.strikethrough {
  text-decoration: line-through;
}

CodePudding user response：

1. Add a property to each todo called isDone, or something similar.
2. Define a function toDoClicked() or similar, and put (click)="toDoClicked(todo)" in your li line
3. Add a conditional class [ngClass]="{'strikethrough-styling': toDo.isDone} also to the line

When you're done, the HTML line should look like:

<li *ngFor="let todo of todos" (click)="toDoClicked(todo)" [ngClass]="{'strikethrough-styling': toDo.isDone}>{{todo.title}}</li>

You'll need to define a strikethrough-styling class, and you might need to use <a> tag instead of li, I don't remember if li has (click) binding.