Angular2 - ngOnInit after Loading Data

component.ts

import {Component, OnInit} from "@angular/core";
import FooService from "foo-service.ts";

@Component({
  selector: "my-elem",
  templateUrl: "my-elem.html",
  providers: [FooService]
})
export default class MyElemCmp implements OnInit {
  data = [];
  loading: true;
  
  constructor(private _fooService:FooService) {}
  
  ngOnInit() {
    // Fetch data, then set loading to false
    this._fooService.getData().then(data => {
      this.data = data;
      this.loading = false;
    });
  }
}

foo-service.ts

import {Injectable} from "@angular/core";

@Injectable()
export default class FooService {
  getData = () => Promise.resolve([{hello: "world"}, {foo: "bar"}];
}

my-elem.html

<div *ngIf="loading">
  Loading, please wait...
</div>
<div *ngIf="!loading">
  Data:
  <ul>
    <li *ngFor="#datum of data">
      {{datum}}
    </li>
  </ul>
</div>