Changing sub-object in Redux store causing unwanted repaint :(

[Jared Collier]

I'm running an application with Angular 2 and Redux using ngrx.  My Redux store has data stored similar to this:

```

"preferenceGroups": [

    {

        "name": "group1",

        "preferences": [

            {

                "name": "pref1",

                "value": true

            },

            {

                "name": "pref2",

                "value": false

            }

        ]

    },

    {

        "name": "group2",

        "preferences": [

            {

                "name": "pref3",

                "value": true

            },

            {

                "name": "pref4",

                "value": true

            }

        ]

    }

]

```

My application uses a component called `card-grid`, which uses `ngFor` to create multiple components called `flipCard`.   Each `flipCard` has two sides, the first showing the name of the preference group, and the second showing all of the preferences contained in the group as toggles.  When the user clicks on card showing the preference group name, it flips over, showing the reverse side with the preference toggles, and grows to take up a good amount of the screen.  When the user clicks on a preference to toggle it on/off (true/false), the event is propagated up via `@Output()` to the top of the application, which calls a service, which uses a reducer to update the preferenceGroup with the updated preference.  The issue I'm running into is that when the preferenceGroup is updated, my binding in my template [preferences]="preferences | async", pulling any updates to preferenceGroup via an observable sees the change, and repaints all my preference groups.  The effect is as follows:

1: cards are displayed in a grid, all showing the name of the preference group

2. user clicks on one card

3. card flips over, displaying the preferences

4. user toggles a preference by clicking on it

5. instead of the card staying flipped and it simply indicating visually that the preference was toggled, the UI repaints and there's a jarring effect that all preference group cards now appear in their unflipped state (although the toggle does take effect on the reverse side of the card).

My UI is more complicated than that, but I simplified the example as much as I could.  Basically, altering part of a preferenceGroup in my Redux store is triggering Angular to repaint the entire area containing all the preferenceGroups.  Any suggestions on how to prevent that repaint would be greatly appreciated.