
Summary
- When we want loose coupling between components.
- When we want one component not to have a reference to the component that it is triggering a state change in.
- When we want the state change to be observed in multiple places.
For example with the layout state openSidevNav$:Obervable<boolean> the sidenav component does not know what it is that change the boolean value of the openSidevNav$:Obervable<boolean> property. It just reacts to the state change.
Scenario
In this article we use a reference to the mat-sidenav instance to toggle whether the the mat-sidenav is open or closed.
However we could also have used a reactive state manager like Slice to monitor and react to layout state changes:
When should we use reactive layout state?
Answer
When we also want to trigger other events, like for instance a custom close animation.
We could trigger the opening and closing of the mat-sidenav like this:
<mat-sidenav [opened]="open | async"></mat-sidenav>
The open$:Observable<boolean> value would come from our reactive layout service that is updated. Whenever we update our open$:Observable<boolean> state that will in turn trigger effects or actions that are observing this state.
