title: How can I use async data in Angular by loading it once?
body: <p>I have a <strong>data.service.ts</strong> where I want to preload 2 arrays:</p>
  
  <pre><code>public aspects: DTO.Aspect[];
  public reports: DTO.Report[];
  
  constructor(dao: DaoService){
     // Getting Reports
     this.dao.getReports().subscribe(reps: DTO.Report[] =&gt; {
        this.reports = reps;
     })
  
     //Getting Aspects of each Report
     for(let i = 0; i &lt; this.reports.length; i++){
        this.dao.getAspects(this.reports[i].reportId).subscribe(asps: DTO.Report[] =&gt; {
           this.aspects = asps;
        })
     }
  }
  </code></pre>
  
  <p><em>FYI</em> <strong>dao.service.ts</strong></p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { HttpClient, HttpErrorResponse } from "@angular/common/http";
  import { Observable, throwError } from "rxjs";
  import { catchError, retry } from "rxjs/operators";
  import { DTO } from "./dto";
  
  @Injectable({
    providedIn: "root"
  })
  export class Dao {
    private static API: String =
      "https://apiapiapiapi.com";
    constructor(private http: HttpClient) {}
  
  getAspects(repId: string): Observable&lt;DTO.Aspect[]&gt; {
      console.log(Dao.API + "aspect/report/" + repId);
      return this.http
        .get&lt;DTO.Aspect[]&gt;(Dao.API + "aspect/report/" + repId)
        .pipe(retry(3), catchError(this.handleErrors));
    }
  
  getReports(): Observable&lt;DTO.Report[]&gt; {
      console.log(Dao.API + "report/current");
      return this.http
        .get&lt;DTO.Report[]&gt;(Dao.API + "report/current")
        .pipe(retry(3), catchError(this.handleErrors));
    }
  }
  </code></pre>
  
  <p>After that I want to use these arrays everywhere in my app. For Example when I click in the sidebar on a report it should route me to a page where all the aspects of that report are displayed:</p>
  
  <p><strong>report.component.ts</strong></p>
  
  <p>routerLink: <em>localhost:4200/report/512</em></p>
  
  <pre><code>import { Component, OnInit } from "@angular/core";
  import { Router, ActivatedRoute, ParamMap } from "@angular/router";
  import { DataService } from "@core/data.service";
  import { DTO } from "@core/dto";
  import { Dao } from "@core/dao.service";
  
  @Component({
    selector: "app-report",
    template: "&lt;div *ngFor='let aspect of aspects'&gt;
                  &lt;span&gt;{{aspect.aspectName}}&lt;/span&gt;
               &lt;/div&gt;",
    styleUrls: ["./report.component.scss"]
  })
  export class ReportComponent implements OnInit {
  aspects: DTO.Aspect[] = [];
  
  constructor(data: DataService, route: ActivatedRoute){
     // Get the Report ID from the URL
     this.route.paramMap.subscribe(params =&gt; {
        const reportId = params.get("reportId");
  
        // Use the Report ID (512) as parameter to find the Aspects of this Report
        this.aspects = this.data.aspects.filter(aspect =&gt; {   // aspects in data.service.ts are not loaded yet
           return aspect.reportId == reportId;
        })
     })
  }
  }
  </code></pre>
  
  <p>The problem is that the aspects in the data.service.ts are not necessarely loaded yet. I tried a few things by creating my own Observers or using Promises but the performance became even worse. So my question is:</p>
  
  <p>How can I load data <strong>once</strong> and use them when they are ready?</p>