Angular2 Update a View while waiting for data to load

Question

I have a form that requires input asking a user for numbers to pick. When the form is submitted, I want a "spinner graphic" to display while the data is being generated and formatted.
At the moment, I cannot get the spinner to display until after the data is returned.

My code looks like :

getTickets(){
  this.PBPicks=this._lottoService.getPBTicket(this.newTixForm.value['PBTix']);
  this.MegaPicks=this._lottoService.getMegaTicket(
  this.newTixForm.value['MegaTix']);
  return false;
 }

submitForm(){
  this.isLoading=true;
  console.log('Show Spinner');
  this.isLoading=this.getTickets();
    console.log("Data Loaded");
 }

When the data is returned and displayed is when the spinner shows and then disappears even though the console shows it being executed much sooner than when the data is returned.

Answer 1

Here is what I did: Loading icon component:

isLoading = false;
   constructor() { }

   ngOnInit() {}
   show() 
  {
    this.isLoading = true;
   }
  hide() 
  {
    this.isLoading = false;
  }

Loading-icon.component.html

<span *ngIf="isLoading">
  <img src="/assets/images/loading.gif" alt="">
</span>

App.Component.ts

//To get access to component and its method, using the @ViewChild decorator
 @ViewChild('imLoading') imLoading: LoadingIconComponent;

this.model.getData = getData;
this.imLoading.show();