title: How to wait for multiple HTTP calls to be completed in Angular with RXJS?
body: <p>In this demo application we have following structure:</p>
  <ul>
  <li>List of articles (loaded when page loads)</li>
  <li>Each article has a nested object called detail, loaded lazily</li>
  </ul>
  <p>Clicking on an article item loads its details.</p>
  <p>But the problem I face is the export button (simulated in this case). The initial export doesn't contain the article details. If I export again a couple of seconds later, the details are included too.</p>
  <p>The delays in the article service simulate some latency in http calls.
  What is the correct way to solve this? I know this is working when adding some delay(), but I don't like this solution.</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-riqbsz?file=src%2Findex.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-riqbsz?file=src%2Findex.html</a></p>