Member-only story
Connecting Components with Reactive Forms
In his article Presentational and Container Components, Dan Abramov discusses separating presentational and container components in React. The idea is general and separating Angular components in a similar manner is an approach that some developers choose to take.
With Angular, the separation of container and presentational components gets interesting when Reactive Forms are added to the mix. A reactive form introduces an observable, subscriptions to which receive notifications of the form’s — or one of its controls’ — changed values. The notifications make it easy to implement features like debounced searches using RxJS. However, if such features are implemented in presentational components, they will no longer be purely presentational.
How can Reactive Forms be used without compromising the simplicity of presentational components? Let’s look at a solution that uses RxJS.
Usually, presentational components communicate with container components using an Output property that’s an EventEmitter. However, when using Reactive Forms, that would involve converting the notifications received from the form’s valueChanges observable to events. And, in the container component, to be used with an observable service, the events would need to be converted back into an observable. That seems complicated.
