Search⌘ K
AI Features

Controlling Data Streams

Explore how to manage data streams in a single page application using RxJS. Learn to control keyboard and mouse events through a centralized service while toggling modes, ensuring efficient communication between components and scalable event handling.

Work/view mode use case

In this lesson, we will go through a very common scenario when building web applications. Suppose that you are building a SPA web application- a web-based image editor similar to Photoshop that will work in two modes: work Mode and view Mode. It will have several components that must communicate with each other by exchanging keyboard and mouse events, HTTP requests, etc.

When in work mode, every kind of communication between components must take place (with every keyboard and mouse event handled accordingly), and the appropriate action should be triggered.

When in view mode, the event handlers should be disabled so that no action is triggered on any keyboard or mouse events (or the interested subscribers should not be able to listen).

Finally, you must provide a way to allow switching from one mode to another, in most cases, via a switch button. ...