Angular 2 Rxjs creating action after server response

Question

I am a new in Angular2(and especially to RxJs library) and stacked on next step. My web site starts with a register page. And after the completion of of register form i have base service.auth.ts method register usage

     registerUser(){
        this.authService.registerUser(this.registrationForm.value)
        .subscribe((data) => {
           console.log(data);
        })
        //this line should apear after server response from backend
        console.log('AFTER SERVER RESPONSE')
        }

And i recieve response like this

I read some stuff about flatMap method in RxJs documentation and it is claimed to be alternative to default Promise method then() - but i failed to create working instance of code that acutally implements flatMap method for my case

So the question is : How can i achieve result so 'AFTER SERVER RESPONSE' message appears AFTER server response? (not before as mentioned on previous screenshot)

Answer 1

You should wait for asynchronous task to complete. Move that console.log('AFTER SERVER RESPONSE') inside your subscribe block.

registerUser() {
        this.authService.registerUser(this.registrationForm.value)
        .subscribe((data) => {
           console.log(data);
           //this line should apear after server response from backend
           console.log('AFTER SERVER RESPONSE')
        });

      // anything written over here will execute before `registerUser()` returns data
     console.log('THIS WILL PRINT BEFORE SERVER RESPONSE')
}