Listening in to Changes to the State

Changes in state

At this point, ngrx initializes with an empty array and then populates it with data generated by patient-data.service.ts. Next, the components need to listen in for changes to the state.

Three components are involved here. Instead of re-slicing state into rows each time, we can skip the row component and just use the display component, along with a few changes so that Bootstrap handles the rows for us.

To allow this display, let’s change the class on the root element in patient-display.component.html from row to col-xs-2. Update app.component.html to: