I am working on a to do app using Angular. The data for the app is sourced from https://jsonplaceholder.typicode.com/todos. My goal is to have the background color of a "li" change when the Done button is pressed. Can anyone help me with implementing this feature?
Below is the Html code:
<input
(keyup.enter)="createPost(title)" #title
type="text" class="form-control">
<ul class="list-group">
<li
*ngFor="let post of posts"
class="list-group-item">
<button
(click)="updatePost(post)"
class="btn btn-success btn-sm" id="button">
{{post.completed ? 'Done' : 'Not ready'}}
</button>
<button
(click)="editPost(post)"
class="btn btn-dark">
Edit
</button>
<button
(click)="deletePost(post)"
class="btn btn-danger">
Delete
</button>
{{ post.title }}
</li>
</ul>
Here is the update function for reference:
updatePost(post) {
this.http.patch(this.url + '/' + post.id, JSON.stringify({ completed: !post.completed })).subscribe(response => {
post.completed = !post.completed;
});
}