title: Wait for two observables (incl. failed one) before rendering template
body: <p>I have two Observables. The rendering of the template should only start when <strong>BOTH</strong> Observables are completed or failed:</p>
  
  <ul>
  <li>Observable 1 completes and Observable 2 completes or</li>
  <li>Observable 1 completes, but Observable 2 fails</li>
  <li>When Observable 1 fails Observable 2 is not important because the template won't be rendered completely then</li>
  </ul>
  
  <p>(Ignore the <code>&lt;any&gt;</code> type, it's only for simplification here)</p>
  
  <p>Component:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-page',
    templateUrl: './page.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class PageComponent implements OnInit {
    obs1$ = new Subject&lt;any&gt;();
    obs2$ = new Subject&lt;any&gt;();
  
    isLoading = true;
    isObs1Error: boolean;
    isObs2Error: boolean;
  
  
    ngOnInit() {
      this.initializeDataRetrieval();
    }
  
    initializeDataRetrieval() {
      this.obs1$ = this.obs1Method();
      this.obs1$.subscribe((response: any) =&gt; {
        this.isObs1Error = false;
        this.obs1 = response;
  
        this.obs2$ = this.obs2Method();
        this.obs2$.subscribe((response: any) =&gt; {
          this.isObs2Error = false;
          this.isLoading = false;
          this.obs2 = response;
          this.cdr.detectChanges();
        });
      });
    }
  
    private obs1Method(): any {
      return this.obs1Service
        .getStuff()
        .pipe(
          catchError(() =&gt; {
            this.isError = true;
            this.isLoading = false;
            this.cdr.detectChanges();
            return EMPTY;
          })
        );
    }
  
    private obs2Method(): any {
      return this.obs2Service
        .getStuff()
        .pipe(
          catchError(() =&gt; {
            this.isObs2Error = true;
            this.isLoading = false;
            this.cdr.detectChanges();
            return EMPTY;
          })
        );
    }
  
    canDisplayContent(): boolean {
      return !this.isLoading &amp;&amp; !this.isObs1Error;
    }
  
  </code></pre>
  
  <p>Template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-container *ngIf="isLoading"&gt;
    &lt;app-loading-indicator&gt;&lt;/app-loading-indicator&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container *ngIf="isObs1Error"&gt;
    &lt;div class="error"&gt;
      This Obs1 stuff could not be loaded currently
    &lt;/div&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container *ngIf="canDisplayContent()"&gt;
    &lt;div class="error" *ngIf="isObs2Error"&gt;
      Technical error
    &lt;/div&gt;
    More content here which is shown when at least Obs1 doesn't had an error
  &lt;/div&gt;
  </code></pre>
  
  <p>So basically:</p>
  
  <ul>
  <li>I wanna wait with template rendering until both Observables are done and display a loading indicator during the time</li>
  <li>When there is an error with Obs1 then show a message</li>
  <li>When there is an error with Obs2 then render the 3rd <code>ng-container</code> with the Obs2 error message</li>
  </ul>
  
  <p>I'm sure the TS code can be simplified by the usage of ... which RxJS operator? Although reading through <a href="https://scotch.io/tutorials/rxjs-operators-for-dummies-forkjoin-zip-combinelatest-withlatestfrom" rel="nofollow noreferrer">RxJS Operators for Dummies: forkJoin, zip, combineLatest, withLatestFrom</a> I'm not sure if any of these fits. As far as I understood e.g. <code>combineLatest</code> only succeeds when both streams complete successfully ...</p>
  
  <p>Any hint is welcome, thanks.</p>