Subscribe/Unsubscribe VS Create/TakeUntil?

Question

I am developing a component in Angular2 with RxJs. This is my first step with RxJs and I am debating the pros and the const on how to use RxJs.

The component is based on a textbox. When the textbox is passive, out of focus, the textbox display information. When the user click on it, focus is on the textbox, there is a tooltip appearing under it that display information while the user is editing the text.

On each KeyUp, the value of the textbox is processed and multiples business rules are validated then the popup is updated to give feedback to the user.

The validations are processed as a subscription of an observable on the keyup with debounceTime and distinctUntilChanged.

There is two events available: “start editing”, when the user click on the textbox, and “end editing”, when the user press ENTER, ESCAPE, TAB or click out of the control.

Considering there will be more than 20 controls of this kind on the webpage, what is the best practices to manage the subscription of the keyUp? Examples:

Each time “start editing” is triggered, create a subscription on keyup, like Observable.fromEvent(‘keyup’) and add the operator “takeUntil” with the "end editing" event as a parameter?
Keep the observable somewhere, each time “start editing” is triggered, subscribe to it to process the input, when “end editing” occurs, unsubscribe to it?
There is no significant difference between A or B
Others suggestions?

Thank you! Sebastien

Nypan Nypan · Accepted Answer · 2016-11-25T23:14:14

I would do something like this:

onKeyUpObservable
    .window(
        startEditingObservable,
        function() { return endEditingObservable; }
    )
    .subscribe(keyUpEvent => {
        // Here you will get key up events that happen between 
        // start editing and end editing... 
    });

You can read more on the window operator here.

Subscribe/Unsubscribe VS Create/TakeUntil?

1 Answers