Updating counts of array based on its objects property in angular todo app

Question

I am making a todos app with crud functionality in angular to learn angular6 Below in footer link there is counter of todos that are remained to complete currently counter updates everytime with adding and removing todos, but on check and when todo is completed i dont want to count in todos left. I am trying to find a way but i cant. Any help will be appreciated Thanks Below is link of project in stackblitz: stackblitz.com/edit/angular-kxjnyh

Sunil · Accepted Answer · 2018-11-26 19:57:14Z

1

Your implementation is pretty close what you are trying to do. You have method

public getLength(){
    this.todoService.lengthTodos();
 }

Which is reading the todo length from the service. You just need to return the value from service class. Make the following changes and use this function in html.

  public getLength(){
    return this.allTodos.filter(todo => !todo.completed).length;
  }

Change in the html of footer component

<span class="todo-count"><strong>{{getLength()}}</strong> item left</span>

Here is the working copy - https://stackblitz.com/edit/angular-zqvxxb

edited Nov 26, 2018 at 19:57

answered Nov 26, 2018 at 19:35

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Darshit Over a year ago

Thanks, It worked just fine as per my question, but it stops clearCompleted to work and throws error. The problem is in isCompleted(todoService) something i am missing

Sunil Over a year ago

Updated the link and answer - stackblitz.com/edit/angular-zqvxxb

Darshit Over a year ago

Thanks for the support

Collectives™ on Stack Overflow

Updating counts of array based on its objects property in angular todo app

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related