What is the best way to implement line-through text decoration for a list item when it is clicked in an Angular application? Additionally, how can the "completed" value in

Question

What is the best way to implement line-through text decoration for a list item when it is clicked in an Angular application? Additionally, how can the "completed" value in

<h1>My Exciting To Do List</h1>
<input #newTask>
<button (click)="addTask(newTask.value)">Add Task</button>

<ul>
  <li *ngFor="let task of tasks">{{task.name}}</li>
</ul>

export class MyToDoAppComponent implements OnInit {
  title = 'awesome-todo-app';
  tasks:any;
  

  constructor(private taskService:TaskService) {}

  ngOnInit() {
    this.taskService.getTasks()
    .subscribe(response => {
      this.tasks = response;
      console.log(this.tasks)
    })
  }

  
  
  addTask(name: string){
    
    this.tasks.push({
      taskId: 1, 
      name, completed: false
      
      
    });
    console.log(this.tasks)
  }

This is the progress I've made so far and any assistance would be greatly appreciated :)

I've searched extensively on various platforms for a solution, but unfortunately haven't found one that works.

angular typescript

Answer 1

Answer №1

To implement conditional styling, consider utilizing the ngClass directive in Angular and set it based on a true/false condition.

Answer 2

To implement conditional styling, consider utilizing the ngClass directive in Angular and set it based on a true/false condition.

Answer 3

Answer №2

Check out the StackBlitz demo here!

<h1>Manage Your Tasks</h1>
<input #newTask>
<button (click)="addTask(newTask.value)">Add Task</button>

<ul>
  <li *ngFor="let task of tasks">{{task.title}}</li>
</ul>


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

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

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

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

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

p {
  font-family: Roboto;
}

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

Answer 4

Check out the StackBlitz demo here!

<h1>Manage Your Tasks</h1>
<input #newTask>
<button (click)="addTask(newTask.value)">Add Task</button>

<ul>
  <li *ngFor="let task of tasks">{{task.title}}</li>
</ul>


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

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

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

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

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

p {
  font-family: Roboto;
}

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

Answer 5

Answer №3

Include a new property in each todo object named isDone, or something similar.
Create a function named toDoClicked() or equivalent, and add
```
(click)="toDoClicked(todo)"
```
to your li element

Apply a conditional class

[ngClass]="{'strikethrough-styling': toDo.isDone}

also to the line

After completing these steps, your HTML line should resemble this:

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

You must define a CSS class called strikethrough-styling, and you may need to utilize an <a> tag instead of li, as I am unsure if li supports (click) binding.

Answer 6

Include a new property in each todo object named isDone, or something similar.
Create a function named toDoClicked() or equivalent, and add
```
(click)="toDoClicked(todo)"
```
to your li element

Apply a conditional class

[ngClass]="{'strikethrough-styling': toDo.isDone}

also to the line

After completing these steps, your HTML line should resemble this:

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

You must define a CSS class called strikethrough-styling, and you may need to utilize an <a> tag instead of li, as I am unsure if li supports (click) binding.

What is the best way to implement line-through text decoration for a list item when it is clicked in an Angular application? Additionally, how can the "completed" value in

Answer №1

Answer №2

Answer №3

Similar questions

What is the difference between adding the .js extension when importing files in TypeScript versus Angular imports?

Tips for adding an extensive collection of fixed attributes to a function using Typescript

Step-by-step guide to linking a matTooltip with a disabled mat-tab

Ways to address the Generic Object Injection Sink eslint error (security/detect-object-injection)

Expanding a JSON data structure into a list of items

Struggling to set up @angular/material in Angular version 17

The ngx-mat-intl-tel-input plugin is experiencing issues with functionality within the Angular 17 framework

Angular TSLint: Proceed to the following stage despite any encountered errors

Is it beneficial to consolidate masterdata calls into a single call?

exit out of React Dialog using a button

A special function designed to accept and return a specific type as its parameter and return value

Revolutionizing Angular 8 with Hot Module Replacement

Having trouble dispatching a TypeScript action in a class-based component

unable to initiate a new project in angular version 8

Exploring JSON data in real-time

I encountered a roadblock with my Npm start process when it got stuck at 70% completion after incorporating the "lazy

Using Angular and TypeScript/javascript singletons across multiple browser tabs

Encountering an HTTP parsing failure while sending XML through Angular 5's HttpClient

Error in Typescript: Uncaught ReferenceError - "exports" is undefined

There is no way to convert a strongly typed object into an observable object using MobX