How to make Angular2 wait for a promise before rendering component
<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>