Storing crossed-out items in the browser's local storage for a task list

I am currently creating a to-do list and struggling with saving the CSS strike-through element into local storage.

HTML CODE:

<ul class="list-group">
    <li *ngFor="let todo of todos; let i = index"
        class="list-group-item shadow p-3 mb-5 bg-white rounded border border-dark rounded" id="myTask">
        <input type="checkbox" (click)='update()'><span>
        {{todo.task}} <button type="button" class="btn btn-danger" (click)="delete()">X</button>
        </span>
    </li>
</ul>

Typescript Code:

 update() {
    localStorage.setItem('checkbox', JSON.stringify(this.todos));

  }

CSS Code:

input[type="checkbox"]:checked+span {
    text-decoration: line-through;
    color: red;
  }

Answer №1

<ul class="list-group">
    <li *ngFor="let todo of todos; let i = index"
        class="list-group-item shadow p-3 mb-5 bg-white rounded border border-dark rounded" id="myTask">
        <input type="checkbox" (change)='update()' [(ngModel)]="todo.checked"><span>
        {{todo.task}} <button type="button" class="btn btn-danger" (click)="delete()">X</button>
        </span>
    </li>
</ul>

Include a checked property in each item of your todos array and bind it to the variable using ngModel. Update the CSS based on this variable and store it in local storage.

update() {
    localStorage.setItem('checkbox', JSON.stringify(this.todos));

  }

Now, when you save the list of todos, it will contain whether each item is checked or unchecked as true or false.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine the type of the final function within a variable number of nested closures

Imagine you have a function like this: const f = a => b => ... x => { return somevalue } Is there a way to determine the type of just the final function typeof x => { return somevalue } even if we don't know how many closures come before ...

Error Message: "Unable to locate module component - Storybook with TypeScript"

I'm encountering an issue when running Storybook, specifically this error message: ERROR in ./components/atoms/input/input.tsx 14:0-40 Module not found: Error: Can't resolve 'react-tagsinput' in '...' To provide some context ...

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

The appearance of the Angular app undergoes a change following deployment using ng build

I have been working with Angular for several years now, but only recently delved into using Angular Material components in my latest project. I was pleased with how my layout turned out and ready to push it to production. However, after deployment, the com ...

Submitting an ajax form with the use of the symbol '&'

I am currently working on a form submission using the .ajax() method. Within my script, I have the following code: data: dataString, The variable dataString is composed of: var list = $('.listsummary').val() The listsummary class is assoc ...

Having difficulty retrieving precise HTML information for data scraping purposes

I'm a beginner in python and exploring web scraping for a project on . Currently, I'm using selenium to automate the search for a CUSIP and then extract specific details about it. Although I've successfully automated navigation from EMMA&a ...

Choose to either push as a single object or as individual items

I have a quick question that I'd like to get some clarity on. Can someone explain the distinction between these two code snippets: export const addToCart = function(product, quantity){ cart.push({product, quantity}); console.log(`${quantity} ...

Constructing interactive websites and applications

Currently, I am in the process of developing a student tracking system for my local community college using PHP, MySql, and HTML. The project is currently at version 2, but it is not yet complete. My next goal is to bring this project to life by incorporat ...

What is the best way to change the `this` type of an object that is provided as a parameter to a function

I am looking to create a custom function that can expose certain properties to the this of an object being passed as an argument. For example, this is how the function would be called: const props = ['bar']; myBarFunction(props, { get foo() { ...

Is it possible to adjust the opacity when the image attribute is altered?

I am trying to achieve a smooth transition when changing the image source on click using previous/next buttons. I want the image to fade out, then change source and fade back in, but I'm having trouble getting it to work seamlessly. I attempted to use ...

Encountering a "then is not a function" error when attempting to mock an HTTP promise service

Unique service fetchPopupData(Docversion, versionname, Structureweek, docVersionFieldID, versionid, WLTP) { return this.http.get(this.apiUrl + 'GetElementPopUpData?docVersion=' + Docversion + '&versionVariant=' + versionna ...

Guide on switching between dark and light palette type for themes with Switch and withStyles() styling approach

I'm currently working on implementing a dark mode switch for my website. While I've managed to change the text color successfully, the background and other elements remain unaffected, even with CssBaseline in place Here's the crucial code: ...

Instructions on creating a vertical height adjustment handle for a website

Is there a way to create a 100% height div that can be divided by a draggable border vertically? Take a look at my fiddle to see what I have so far: http://jsfiddle.net/k5rtbzs5/ This is the HTML code: <div class="column"> <div class="top"> ...

When trying to construct a URL in a Next.js Appwrite project, a "TypeError" may occur, but it works perfectly fine when the URL is provided directly

I am currently following a tutorial on YouTube by JS Mastery about their HealthCare application using Next.js and Appwrite. I have obtained my API keys from the Appwrite cloud and added them to the .env.local file. However, upon running my project, I encou ...

Next.js 13 app directory experiences 404 Not Found error due to dynamic routing issues

I recently built a straightforward to-do app using Next.js 13 paired with TypeScript. The process involved creating an array of objects, each comprising an id string and a name string. Subsequently, I iterated through the list and showcased the names withi ...

Unable to determine all parameters for the ViewController: (?, ?, ?)

During my work on a project using IONIC 3 and Angular 4, I encountered the need to create a component responsible for managing popover controllers. Transferring data from this component to the popover component was straightforward. However, I ran into an i ...

Mastering Generic Types in Functions in Typescript

My current structure looks like this: export interface Complex { getId<T>(entity: T): string } const test: Complex = { getId<Number>(entity){return "1"} // encountering an error 'entity is implicitly any' } I am wondering w ...

How to Send an Email with an Attachment Using an Angular Application

Currently working with Angular9 to build applications. I am looking for guidance on sending emails from an Angular9 application while attaching a CSV file. I would greatly appreciate any sample code you can provide. ...

Converting HTML to PDF: Transform your web content into

I have a couple of tasks that need to be completed: Firstly, I need to create a functionality where clicking a button will convert an HTML5 page into a .PDF file. Secondly, I am looking to generate another page with a table (Grid) containing data. The gr ...

What is the best method for eliminating the initial character in every line of a textarea?

The desired output should display as LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no instead of >LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no. Is there a way to achieve this using JavaScript? Specifically, the ">" character at the be ...