title: Wait for Data Before Rendering View in Angular 5
body: <p>I am new to Angular 5 and was able to create view with access to service methods using subscribe but encounter problem in delay in render. The user see first "undefined" string and after 0.5 sec it change to the correct value.</p>
  
  <p>Here is the .ts file for the component:</p>
  
  <pre><code> public trips: Trip[];
    public numberOfUsers : Map&lt;string, number&gt; = new Map&lt;string, number&gt;();
  
    constructor(private tripService: TripService) { }
  
    ngOnInit() {
     this.getTrips();
    }
  
    getTrips() {
      this.tripService.getTripForMe().subscribe(
        data =&gt; { this.trips = data;},
        err =&gt; console.error(err),
        () =&gt; this.initNumberOfUsers()
      );
    }
  
    initNumberOfUsers() {
      for (let i = 0; i &lt; this.trips.length; i++) {
        let count;
        this.tripService.getNumberOfUsers().subscribe(
          data =&gt; { count = data},
          err =&gt; console.error(err),
          () =&gt; this.numberOfUsers.set(this.trips[i].id, count)
        );
  
  
        ;
      }
    }
  
    getNumberOfUsers(data) {
      return this.numberOfUsers.get(data.id);
    }
  </code></pre>
  
  <p>The method initNumberOfUsers is called after the first subscribe finish which is good, but the getNumberOfUsers(data) called probably before and get "undefined".</p>
  
  <p>Here is the relevant part from the template ("data" is current value of a ngFor loop):</p>
  
  <pre><code>&lt;span [innerText]="getNumberOfUsers(data)"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Is there a way to make sure that both subscribe methods are sequentially finalized before rendering ?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I was able to create a resolver and the concole show the object but, I have difficulties to pass the data to the component.</p>
  
  <p><strong>Reolver code:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Router, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
  import { Trip} from ....
  import { TripService } from .....
  import { Observable } from 'rxjs/Rx';
  
  @Injectable()
  export class TripsResolve implements Resolve&lt;Trip[]&gt; {
  
     public trips: Trip[];
  
     constructor(private service: TripService) {}
  
     resolve(route: ActivatedRouteSnapshot, 
             state: RouterStateSnapshot) {
       this.service.getTrips().subscribe(
          data =&gt; { this.trips = data },
          err =&gt; console.error(err),
          () =&gt; console.log(this.trips)
        );
        return this.trips;
     }
  }
  </code></pre>
  
  <p><strong>From route</strong></p>
  
  <pre><code>resolve: {
           trips: TripsResolve
        }
  </code></pre>
  
  <p><strong>From module</strong></p>
  
  <pre><code>providers: [
          ...
          TripsResolve,
          ...
  </code></pre>
  
  <p><strong>Data is not pass/not avilavle in the component:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Trip } from ...
  import { Router, ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: ...
    templateUrl: ...
    styleUrls: ...
  })
  export class MyComponent implements OnInit {
  
      public trips: Trip[];
  
      constructor(private route: ActivatedRoute,
                  private router: Router) {
      }
  
      ngOnInit() {
          this.route.data.forEach(data =&gt; {
              this.trips = data.trips;
              console.log(this.trips);  //can't see it
         });
  
      } 
  }
  </code></pre>
  
  <p>Any idea how can I access/retrieve the data in the component ?        </p>