title: How to show page only when all children were fully loaded in Angular 5?
body: <p>I have a page with few child components:</p>
  
  <pre><code>&lt;div class="wrapper" *ngIf="isPageFullyLoaded"&gt;
  
    &lt;header&gt;&lt;/header&gt;
  
    &lt;main class="content"&gt;
        &lt;trip-list&gt;&lt;/trip-list&gt; 
    &lt;/main&gt;
  
    &lt;footer&gt;&lt;/footer&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The ts file include the following:</p>
  
  <pre><code>...
  public isPageFullyLoaded = false;
  ...
  ngAfterContentInit() {
          this.isPageFullyLoaded = true;
      }
  
  The child trips-list:
  &lt;section *ngIf="trips"&gt;
      &lt;ul&gt;
          &lt;li *ngFor="let data of trips" &gt;
  ...
  </code></pre>
  
  <p>The trips list is loaded using rest api:</p>
  
  <pre><code>getTrips() {
      this.fundService.getTrips().subscribe(
        data =&gt; { this.trips= data; }, 
        err =&gt; console.error(err),
        () =&gt; console.log(this.trips)
      );
    }
  </code></pre>
  
  <p>I've tried also ngAfterViewInit</p>
  
  <p>I need a way to show the main div only when the children were fully loaded.
  I can't used *ngIf inside the div cause the children component won't loaded.</p>
  
  <p>Any idea how to do it? </p>