title: How to make Angular2 wait for a promise before rendering component
body: <p>First: Yes, I have Googled this beforehand, and the <a href="https://stackoverflow.com/questions/34731869/wait-for-angular-2-to-load-resolve-model-before-rendering-view-template">solution</a> that came up isn't working for me.</p>
  
  <p><strong>The Context</strong></p>
  
  <p>I have an Angular 2 component that calls a service, and needs to perform some data manipulation once it receives the response:</p>
  
  <pre><code>ngOnInit () {
    myService.getData()
      .then((data) =&gt; {
        this.myData = /* manipulate data */ ;
      })
      .catch(console.error);
  }
  </code></pre>
  
  <p>In its template, that data is passed to a child component:</p>
  
  <pre><code>&lt;child-component [myData]="myData"&gt;&lt;/child-component&gt;
  </code></pre>
  
  <p>This is causing an error that the child is getting <code>myData</code> as undefined. The Google result posted above talks about using <code>Resolver</code> but that isn't working for me.</p>
  
  <p>When I create a new resolver:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
  import { Observable } from 'rxjs/Rx';
  import { MyService } from './my.service';
  
  @Injectable()
  export class MyResolver implements Resolve&lt;any&gt; {
      constructor(private myService: MyService) {}
  
      resolve (route: ActivatedRouteSnapshot): Observable&lt;any&gt; {
          return Observable.from(this.myService.getData());
      }
  }
  </code></pre>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>const appRoutes: Routes = [
    {
      path: 'my-component',
      component: MyComponent,
      resolve: {
          myData: MyDataResolver
      }
    }
  ];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p>I get an error that there is no provider for <code>MyDataResolver</code>. This is still the case when I add <code>MyDataResolver</code> to the <code>providers</code> property in <strong>app.component.ts</strong>:</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    providers: [
          MyService,
          MyResolver
    ]
  })
  </code></pre>
  
  <p>Has the interface for using this changed?</p>