angular 2+ "component loading..." scenario

Question

I'm loading an ng2 component onto a page. The most basic "loading" indicator for an ng2 component looks like this:

<my-component>Loading...</my-component>

However, I've been asked to show a spinner icon until the default search results of my-component have been fully loaded. So I put the following check in the parent div of my-component:

<div *ngIf="vm?.FirstResultsLoaded">
    <!-- my-component html template -->
</div>

However, with this approach, the spinner nested within the selector tags on the parent page disappears when ngOnInit() gets hit but then the selector/component placeholder on the parent page goes blank for 2 seconds while the underlying dataset is retrieved, processed and bound to the component view model member variable. Is there any other way to handle this scenario? For example, is there any type of event listener that I could wire up to support this scenario? The main concern is that a spinner needs to be displayed only once on initial component load, only while the underlying component is loading.

Mehdi Mehdi · Accepted Answer · 2017-09-06T23:13:09

Ok, what about this: You create an EventEmitter within the child to let the parent know when to make the child visible like so :

Parent template :

<div [hidden]="childLoading">
    <child-component [sameInput]="input"
                     (readyEventEmitter)="onChildReadyToDisplay($event)">
    </child-component>
</div>

parent.component.ts :

///
this.childLoading = true;

onChildReadyToDisplay(isReady){
   this.childLoading = !isReady;
}
///

child.component.ts :

readyEventEmitter = new EventEmitter<boolean>();
OnInit(){
  loadData()
}
loadData(){
   ///your logic here
   processData();
}
processData(){
  ... 
  //When data loaded and processed :
  this.readyEventEmitter.emit(true);
}

angular 2+ "component loading..." scenario

1 Answers