title: Angular2 RxJS - Multiple HttpGet - Notify me when they all complete
body: <p>I have  a component that makes 3 separate http calls.  Once all 3 calls complete I want to perform an action (hide my loading bar).</p>
  
  <p>I think the <em>.concat</em> operator is the solution but I am having trouble figuring out how to use it.  I only want my http calls to execute once, but because I have multiple .subscribe() calls (original call, and concat) I understand why my http calls are being made 2X.  I just dont know how to code it. Maybe I need <em>forkJoin?</em> <em>.Concat</em>?</p>
  
  <p><strong>My Current Angular2 Component.ts</strong> - makes http calls 2X</p>
  
  <pre><code>const form$ = this.myService.getSubmissionForm(this.submissionId);        
  this.subscription = form$
      .subscribe((submissionForm: SubmissionForm) =&gt; {                    
          this.submissionForm = submissionForm;                               
      },
      (error: any) =&gt; {  },       /* Error */ 
      () =&gt; {  });                /* Complete success*/ 
  
  const comments$ = this.myService.getComments(this.submissionId);
  this.subscription = comments$.subscribe(
      (comments: Comment[]) =&gt; {                
          this.submissionComments = comments;
      });
  
  const documents$ = this.myService.getRelatedDocuments(this.submissionId);
  this.subscription = documents$.subscribe(
      (viewModel: SubmissionDocumentsSection) =&gt; {
          this.submissionDocumentSection = viewModel;
      });
  
  // Inform any listeners that our async calls have all completed.
  const combined$ = Observable.concat(form$, comments$, documents$);
  combined$.subscribe(
      () =&gt; { },
      (error: any) =&gt; {                
          this.ngInitLoadComplete.emit(false);               
      },
      () =&gt; {                
          this.ngInitLoadComplete.emit(true);               
      });
  </code></pre>
  
  <p><strong>What I Think I Want.ts</strong></p>
  
  <pre><code>const form$ = this.myService.getSubmissionForm(this.submissionId);          
  const comments$ = this.myService.getComments(this.submissionId);
  const documents$ = this.myService.getRelatedDocuments(this.submissionId);
  
  // Inform any listeners that our async calls have all completed.
  const combined$ = Observable.concat(form$, comments$, documents$);
  
  /** Bad syntax here! How do I subscribe and get results? **/
  combined$.subscribe(
      (submissionForm: SubmissionForm ,
       comments: Comment[],
       viewModel: SubmissionDocumentsSection  ) =&gt; {
          this.submissionForm = submissionForm;          
          this.submissionComments = comments;
          this.submissionDocumentSection = viewModel;
      },
      (error: any) =&gt; {                
          this.ngInitLoadComplete.emit(false);               
      },
      () =&gt; {                
          this.ngInitLoadComplete.emit(true);               
      });
  </code></pre>
  
  <p>My syntax is not correct and I am having trouble finding a solution. 
  How do I achieve this?</p>