Angular2: How to load data before rendering the component?
<p>I am trying to load an event from my API before the component gets rendered. Currently I am using my API service which I call from the ngOnInit function of the component.  </p>

<p>My <code>EventRegister</code> component:</p>

<pre><code>import {Component, OnInit, ElementRef} from "angular2/core";
import {ApiService} from "../../services/api.service";
import {EventModel} from '../../models/EventModel';
import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams, RouterLink} from 'angular2/router';
import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from 'angular2/common';

@Component({
    selector: "register",
    templateUrl: "/events/register"
    // provider array is added in parent component
})

export class EventRegister implements OnInit {
    eventId: string;
    ev: EventModel;

    constructor(private _apiService: ApiService, 
                        params: RouteParams) {
        this.eventId = params.get('id');
    }

    fetchEvent(): void {
        this._apiService.get.event(this.eventId).then(event =&gt; {
            this.ev = event;
            console.log(event); // Has a value
            console.log(this.ev); // Has a value
        });
    }

    ngOnInit() {
        this.fetchEvent();
        console.log(this.ev); // Has NO value
    }
}
</code></pre>

<p>My <code>EventRegister</code> template</p>

<pre class="lang-html prettyprint-override"><code>&lt;register&gt;
    Hi this sentence is always visible, even if `ev property` is not loaded yet    
    &lt;div *ngIf="ev"&gt;
        I should be visible as soon the `ev property` is loaded. Currently I am never shown.
        &lt;span&gt;{{event.id }}&lt;/span&gt;
    &lt;/div&gt;
&lt;/register&gt;
</code></pre>

<p>My API service</p>

<pre><code>import "rxjs/Rx"
import {Http} from "angular2/http";
import {Injectable} from "angular2/core";
import {EventModel} from '../models/EventModel';

@Injectable()
export class ApiService {
    constructor(private http: Http) { }
    get = {
        event: (eventId: string): Promise&lt;EventModel&gt; =&gt; {
            return this.http.get("api/events/" + eventId).map(response =&gt; {
                return response.json(); // Has a value
            }).toPromise();
        }     
    }     
}
</code></pre>

<p>The component gets rendered before the API call in the <code>ngOnInit</code> function is done fetching the data. So I never get to see the event id in my view template. So it looks like this is a ASYNC problem. I expected the binding of the <code>ev</code> (<code>EventRegister</code> component) to do some work after the <code>ev</code> property was set. Sadly it does not show the <code>div</code> marked with <code>*ngIf="ev"</code> when the property gets set.</p>

<p><strong>Question:</strong> Am I using a good approach? If not; What is the best way to load data before the component is starting to render?</p>

<p><strong>NOTE:</strong> The <code>ngOnInit</code> approach is used in this <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt4.html" rel="noreferrer">angular2 tutorial</a>.</p>

<p>EDIT:</p>

<p>Two possible solutions. First was to ditch the <code>fetchEvent</code> and just use the API service in the <code>ngOnInit</code> function.</p>

<pre><code>ngOnInit() {
    this._apiService.get.event(this.eventId).then(event =&gt; this.ev = event);
}
</code></pre>

<p>Second solution. Like the answer given.</p>

<pre><code>fetchEvent(): Promise&lt;EventModel&gt; {
    return this._apiService.get.event(this.eventId);
}

ngOnInit() {
    this.fetchEvent().then(event =&gt; this.ev = event);
}
</code></pre>