RxJS bufferToggle() Transformation Operator
The RxJS bufferToggle() operator is a transformation operator that takes two arguments, openings and closingSelector. Here, the opening arguments specify a subscribable or a promise to start the buffer. The second argument, closingSelector, specifies a subscribable or promise that indicates closing the buffer and emitting the values collected.
The RxJS bufferToggle() buffers the source Observable values starting from the emission of openings and ending when the closingSelector emits. The values emitted by the originating Observable is buffered until the closingSelector stop the emitting values from the originating Observable.
You can deploy this example by using a button.
Here, we can buffer the mouse click events on a button and emit the MouseEvent objects buffered according to the closingSelector.
openings: It specifies a Subscribable or Promise of notifications to start new buffers.
closingSelector: It specifies a function that takes the value emitted by the openings observable and returns a Subscribable or Promise, which signals that the associated buffer should be emitted and cleared when it emits.
The bufferToggle () operator's return value is observable that will have an array of buffered values.
Let us see some examples of bufferToggle () operator to understand it clearly.
Example 1 (Toggle buffer on/off in a time interval)
After executing the above example, you will see the following result:
Example 2 (Toggle buffer on/off when mouse drag or down/up)
After executing the above example, you see the following result when you drag your mouse or up/down.