When to Use a Reactive Layout State

Ole Ersoy
Ole Ersoy
Nov 7 · 2 min read
Image by John Hain from Pixabay

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade