Q:

Display toast when observable returns an error in IONIC 3 ASP.NET WEB API

I am developing an IONIC 3 app that consumes Asp.NET web API services, for the authentication am using Token based auth, so when the user enters valid credentials he gets back a token that will be saved in FireBase db and if he enters wrong credentials he gets a toast that displays a simple error text. 
I am getting the response successfully whatever its the Token or the error from the Observable, but I want to show a toast in case of bad credentials.
I am new to Rxjs and reactive programming. So my question is How to chain the code showing the toast to the subscribe method in the code below:
logUser(){
      this.loginService.login(this.loginModel.userName,this.loginModel.password,this.loginModel.grant_type)
        .subscribe(token => {this.Token= token ,
                            console.log(this.Token.access_token)},
                              error => this.errorMessage = <any>error);      
         //<any>this.toast.create(this.toastOptions).present()             
      }

A:

I've indented your code in a different way to show you where you should open the toast message for both scenarios (success and error):
logUser(){
    this.loginService.login(this.loginModel.userName,this.loginModel.password,this.loginModel.grant_type)
        .subscribe(
            token => {
                this.Token = token;
                console.log(this.Token.access_token);

                // Here you can show a toast when the user was able to get the token!
                // ...
            },
            error => {
                this.errorMessage = (<any>error);

                // Here you can show a toast when an error has ocurred!
                // ...

            });      
}

So basically since the subscribe is async, you'd need to put all the code that handles the success scenario inside of the token => { ... } callback, and all the code that handles an error in the error => { ...} callback.

