Angular using the observable complete vs next handler and when to use each appropriately

Question

Question - based on the Angular doc, when is it more appropriate to use next vs complete for my observable?

I'm looking through someones Angular 7 project and I see a lot of code that looks like this below where some calls use next and some just use complete and I'm trying to know when to use the appropriate one based on the Angular doc, because next is 'required' and complete is 'optional'.

login() {
  this.authService.login(this.model).subscribe(next => {
    this.alertService.success('Logged in successfully');
  }, error => {
    this.alertService.danger(error);
  }, () => {
    this.router.navigate(['/home']);
  });
}

register() {
  this.authService.register(this.user).subscribe(() => {
      this.showRegistrationComplete = true;
    }, error => {
      // handle the error code here
    }
  );
}

Where in some cases I see 'next' and some cases I see '()' complete for the subscribe.

Both of these 2 calls above call these below (post methods to a controller)

login(model: any) {
    return this.http.post(this.baseUrl + 'login', model).pipe(
      map((response: any) => {
        const user = response;
        if (user) {
          // do some stuff
        }
      })
    );
  }

  register(model: any) {
    return this.http.post(this.baseUrl + 'register', model);
  }

What happens if I have this below - does this mean 'complete' or does this mean 'next' because it's the first parameter in the subscribe?

this.authService.login(this.model).subscribe(() => {
      this.alertService.success('Logged in successfully');
      this.router.navigate(['/home']);
    }, error => {
      this.alertService.danger(error);
    });

Answer 1

From RxJS documentation:

Subscribing to an Observable is like calling a function, providing callbacks where the data will be delivered to.

An observable can send three types of notifications: Next, Error, Complete.

• Next notification sends a value such as a Number, a String, an Object, etc.

• Error notification sends a JavaScript Error or exception.

• Complete notification does not send a value.

And in subscribe() method we provide three callbacks to receive these three types of notifications. Order of the callbacks matter, they correspond to Next, Error, and Complete in order.

In the code below, the parameter next in the first callback can be named anything, its name doesn't have any significance.

this.authService.login(this.model).subscribe(next => {
  this.alertService.success('Logged in successfully');
});

When there is no parameter in first callback, we aren't capturing the values sent from the observable. We can ignore having a parameter when we are only concerned with knowing that a value is sent but don't care about the actual value sent.

this.authService.login(this.model).subscribe(() => {
      this.alertService.success('Logged in successfully');
      this.router.navigate(['/home']);
    }, error => {
      this.alertService.danger(error);
    });

In above code snippet, we won't receive the values sent but the alert is triggered whenever a value is sent. Here we don't have the third callback, so we won't be notified when the observable completes.

When is it more appropriate to use next vs complete for my observable?

• Use the first callback to receive values from an observable.

• Use second callback for handling any errors.

• Use third callback to perform any tasks when the observable completes.

Also note that Error and Complete notifications may happen only once during the observable execution, and there can only be either one of them. So when there is an error, the third callback won't be called.