How to "chain" two seperate observables in Angular 2
<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>