How to call the first function after the second function is implemented in observable?

Question

I have two functions and I want to call the goBack() function after save() is called.

  goBack(): void {
    this.location.back();
  }
  save(): void {
    this.employeeservice.updateEmployee(this.employees)
      .subscribe(res  => this.goBack());
  }

updateEmp :

updateEmployee(employee: Employee):Observable<Employee>{
                let headers = new Headers({'Content-Type': 'application/json'});
                let options = new RequestOptions({headers: headers});
                const url= `${this.empurl}/${employee.id}`
                return this.http
                .put(url,JSON.stringify(employee),{headers: headers})
                .map(this.extractData)

                .catch(this.HandleErrorObservable)
            }

Employee-details.ts :

import {Component,OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
import {Location} from '@angular/common';

import {Employee} from './employee';
import {EmployeeService} from './employee.service';





@Component ({ 
    selector: 'employee-detail',
    templateUrl: './employee-details.html'

})

export class EmployeeDetails {
    employees : Employee;

    constructor(
        private employeeservice : EmployeeService,
        private route : ActivatedRoute,
        private location : Location
        ){}

    ngOnInit(){
    this.route.params
      .switchMap((params: Params) => this.employeeservice.getEmployee(+params['id']))
      .subscribe(employees => this.employees = employees);
  }
goBack(): void {
    this.location.back();
  }
  save(): void {
    this.employeeservice.updateEmployee(this.employees)
      .subscribe(res  => {
        console.log('Back from save');
        this.goBack();
    });
  }

}

Employee-service.ts :

import { Injectable } from '@angular/core';
import { Http, Response,Headers,RequestOptions} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import {Employee} from './employee'

@Injectable()
    export class EmployeeService {
            empurl = 'api/employees';
            constructor (private http:Http){}
            getDetailsFromJson():Observable<Employee[]>{
                return this.http.get(this.empurl)
                        .map(this.extractData)
                        .catch(this.HandleErrorObservable);                        
            }
            addEmployees(employee: Employee): Observable<Employee>{
                let headers = new Headers({'Content-Type': 'application/json'});
                let options = new RequestOptions({headers: headers});
                return this.http.post(this.empurl,employee,options)
                        .map(this.extractData)
                        .catch(this.HandleErrorObservable)
            }
            delete(id : number){
                console.log(id);
    return this.http.delete(`${this.empurl}/${id}}, options`)

  }
            updateEmployee(employee: Employee):Observable<Employee>{
                let headers = new Headers({'Content-Type': 'application/json'});
                let options = new RequestOptions({headers: headers});
                const url= `${this.empurl}/${employee.id}`
                return this.http
                .put(url,JSON.stringify(employee),{headers: headers})
                .map(this.extractData)

                .catch(this.HandleErrorObservable)
            }

            getEmployee(id : number){
                const url= `${this.empurl}/${id}`
                return this.http.get(url)
                .map(response => response.json().data as Employee)
                .catch(this.HandleErrorObservable)
            }


            private extractData(res: Response){
                let body= res.json();
                return body.data || []
            }
            private HandleErrorObservable(error : Response | any){
                console.log(error.message || error);
                return Observable.throw( error.message || error);
            }
    }

employee-deatils.html :

<div *ngIf="employees" > 


<div class="container" >
    <h1>{{employees.firstname}} details!</h1>
    <form class="form-horizontal" #employeeform="ngForm">
      <div class="form-group ">
        <label for="firstname" class="control-label col-md-3">FirstName:</label>
        <div class="col-md-6">
        <input type="text" class="form-control col-md-6" id="firstname" required [(ngModel)]="employees.firstname" name="firstname" >


      </div>
      </div>
      <div class="form-group">
        <label for="lastname" class="control-label col-md-3">LastName:</label>
        <div class="col-md-6">
        <input type="text" class="form-control" id="lastname" required [(ngModel)]="employees.lastname" name="lastname">

        </div>
      </div>
     <button class="btn btn-default" (click)="goBack()" >Back</button>
      <button class="btn btn-success" (click)="save()" [disabled]="!employeeform.form.valid">Save</button>
      </form>
      </div>
</div>

In promises we would call it as .then(() => this.goBack()); How do you call that in observable??

Answer 1

First verify that your updateEmployee method is working

 updateEmployee(employee: Employee):Observable<Employee>{
                    let headers = new Headers({'Content-Type': 'application/json'});
                    let options = new RequestOptions({headers: headers});
                    const url= `${this.empurl}/${employee.id}`
                    return this.http
                    .put(url,JSON.stringify(employee),{headers: headers})
                    .map(this.extractData)
                    .subscribe(
                     data => console.log(data),
                       err => console.log(err),
                      () => console.log('working')
                         );
                }

if this function working and if your able see data in the console log than there is some issue with subscription.

if you have issue with subscription than remove providers in your component class and add in the module level.

still if your facing issue than post your component class

Answer 2

Your code seems correct. Check if the updateEmployee method returns successfully. If you just want to test observable to make sure it's not stuck you can write something like:

this.employeeservice.updateEmployee(this.employees)
    .subscribe(res => {
        console.log('Back from save');
        this.goBack();
    });

So now either you won't see your console log in which case there's something wrong with your observable or there's nothing in the previous state of the history.