title: How do you efficiently check for datas loaded in Angular 2+ components?
body: <p>In angular i do the following in each of my component which communicate with an API :</p>
  <pre><code>export class ExampleComponent implements OnInit {
  
      public datasLoaded: boolean = false;
  
      private datasALoaded: boolean = false;
      private datasBLoaded: boolean = false;
      private datasCLoaded: boolean = false;
  
      constructor(private api: MyAPIService) { }
  
      ngOnInit(): void {
          fetchDatas();
      }
  
      fetchDatas() {
          this.api.getDatasA().subscribe({
              next: datas =&gt; {
                  this.datasALoaded = true;
                  this.checkDatasLoaded();
              }
          });
  
          this.api.getDatasB().subscribe({
              next: datas =&gt; {
                  this.datasBLoaded = true;
                  this.checkDatasLoaded();
              }
          });
  
          this.api.getDatasC().subscribe({
              next: datas =&gt; {
                  this.datasCLoaded = true;
                  this.checkDatasLoaded();
              }
          });
      }
  
      private checkDatasLoaded() {
          this.datasLoaded = this.datasALoaded &amp;&amp; this.datasBLoaded &amp;&amp; this.datasCLoaded;
      }
  }
  </code></pre>
  <p>I have a variable for each request representing its status (loaded or not). And a public variable <code>datasLoaded</code> used in the template to aggregate the status of all requests and display content only if everything is loaded :</p>
  <pre><code>&lt;div *ngIf=&quot;datasLoaded&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>That's working perfectly fine , but it's a pain to write for each component. Obviously every components are different , not the same requests , not the same number of requests , not the same behaviour when datas are loaded or not but i'm looking for a solution a bit more easy to write.</p>
  <p>How do you handle this scenario ?</p>