title: How to "chain" two seperate observables in Angular 2
body: <p>I am developing a web application with Angular2 and I have got some problems with getting data from the server. </p>
  
  <pre><code> import ...
  
   @Component({
   ...
  
   })
   export class EmployeeManagementTableComponent implements OnInit, OnDestroy{
  
  private employees: Employee[];
  private departments: SelectItem[] = [];
  private selectedDepartment: string;
  private columns: any[];
  private paramSub: any;
  private employeesSub: any;
  private departmentSub: any;
  
  
  constructor(private employeeManagementService: EmployeeManagementService, 
              private route: ActivatedRoute, 
              private router: Router,
              private ccs: ComponentCommunicatorService,
              private logger: Logger) { }
  
  ngOnInit(){
  
      this.columns = [
       ...
      ];
  
      //ccs is just a service for storing/getting app wide infomation
  
      this.selectedDepartment = this.ccs.getSelectedDepartment();
      this.getDepartments();
      this.getEmployees(this.selectedDepartment);
  
      ...
  }
  
  ngOnDestroy(){
      /*this.employeesSub.unsubscribe();
      this.departmentDub.unsubscribe();*/
  }
  
  getDepartments(){
  
      this.departments.push({label: 'Alle', value: 'all'});
  
      this.departmentSub = this.employeeManagementService.getDepartments().subscribe(
            data =&gt;  {data.forEach((item, index) =&gt; {
                          this.departments.push({label: item, value: index.toString()});
                      });    
                     },
            err =&gt; this.logger.error(err),
            () =&gt; {this.logger.log('done loading');
                   this.departmentSub.unsubscribe()}
      );
  }
  getEmployees(department: any){
  
  this.employeesSub = this.employeeManagementService.getEmployees(department).subscribe(
            data =&gt; {this.employees = data},
            err =&gt; this.logger.error(err),
            () =&gt; {this.logger.log('done loading');
                   this.employeesSub.unsubscribe()}
      );
  }
  </code></pre>
  
  <p>As you see when the component gets initalized it calls two Methods for getting data. The methods get observables from my service and subscribe to them.<br>
  The problem is that order is like <code>call1, call2, result1, result2, ...</code> and I think there is something not right. It should be <code>call1, result1, call2, result2, ...</code> or am I wrong? I tried subscribing to observable2 in the <code>onComplete</code> of observable1 but I think dedicated methods would be useless then.
  I have researched and found some solutions with subscribing to both observables simultaneously with concat but I just want the code to continue after getDepartments() when all data traffic is finished.</p>
  
  <p>And should I unsubscribe in the <code>OnDestroy()</code> or in the <code>OnComplete</code> of the <code>subscribe</code> function I don't really get the difference?</p>