Currently, I am facing an issue with a component in my task list application. The problem lies within an observable array that I iterate through using a wrapper with an async pipe. Additionally, there is a child component known as the "Todo component" which contains an input named "Todo" and an attribute called "showDetails" initialized as false, used for UI toggling. Here is the structure:
<div *ngFor="let todo of todo$">
<app-todo [todo]="todo"></app-todo>
</div>
Within the todo-component template, there is a button to toggle the Boolean value. There is also a function called "toggle" which dispatches an action to update the ngrx state of the todo. However, upon dispatching the action and having the reducer update the state, the entire component is reloaded. This causes the showDetails attribute to revert back to false even if it was previously set to true.
Below is a snippet of the reducer function responsible for updating the state:
on(Toggle, (state, action) =>
state.map(i => (i.id === action.id ? { ...i, todo: !i.todo } : i))
)
For demonstration purposes, here is a StackBlitz example: Demo
I am looking to maintain the value of showDetails even after the state change...