Angular2 - Changing property onClick doesn't trigger view update

Question

i'm trying to re-create the TodoMvc app in Angular2 .

I'm struggling with filtering the list based off a click event. Codesandbox here

The flow is as follows:

1. App renders with this.todoItemFilter = TodoItemFilter.All and *ngFor="let item of todoItems | filter: filterTodoItems"
2. Clicking All/Active/Completed results in a function call setSelectedFilter(todoItemFilterEnum.All) which updates the filter property this.todoItemFilter = filter; but view is not re-rendered.

I'm pretty sure there are multiple ways to solve this problem i'm actually interesting in as many as possible thank you!

Answer 1

You can set a new reference to todoItems:

  setSelectedFilter(filter: TodoItemFilter) {
      this.todoItemFilter = filter;
      this.todoItems = [...this.todoItems];
  }

This will cause the change detection to detect a 'new' value.