Why would you ever call .call() on Observable functions?

Question

I am a relative beginner in Angular, and I am struggling to understand some source I am reading from the ng-bootstrap project. The source code can be found here.

I

Answer 1

To understand it, first you can have a look at the predefined JavaScript function method "call":

var person = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var myObject = {
    firstName:"Mary",
    lastName: "Doe",
}
person.fullName.call(myObject);  // Will return "Mary Doe"

The reason of calling "call" is to invoke a function in object "person" and pass the context to it "myObject".

Similarly, the reason of this calling "call" below:

const inputValues$ = _do.call(this._valueChanges, value => {
  this._userInput = value;
  if (this.editable) {
    this._onChange(value);
  }
});

is providing the context "this._valueChanges", but also provide the function to be called base on that context, that is the second parameter, the anonymous function

value => {
  this._userInput = value;
  if (this.editable) {
    this._onChange(value);
  }
}

In the example that you're using:

• this._valueChanges is the Input Event Observerable

• The _do.call is for doing some side affects whenever the event input happens, then it returns a mirrored Observable of the source Observable (the event observable)

UPDATED Example code: https://plnkr.co/edit/dJNRNI?p=preview

About the do calling:

You can call it on an Observable like this:

const source = Rx.Observable.of(1,2,3,4,5);
const example = source
.do(val => console.log(`BEFORE MAP: ${val}`))
.map(val => val + 10)
.do(val => console.log(`AFTER MAP: ${val}`));
const subscribe = example.subscribe(val => console.log(val));

In this case you don't have to pass the first parameter as the context "Observable".

But when you call it from its own place like you said, you need to pass the first parameter as the "Observable" that you want to call on. That's the different.

as @Fan Cheung mentioned, if you don't want to call it from its own place, you can do it like:

const inputValues$=this._valueChanges.do(value=>{
  this._userInput = value;
  if (this.editable) {
    this._onChange(value);
  }
})