Angular 2 Display Loading Message

问题:

I'm a beginner in Angular 2 and I have a scenario whee there is a directive within a directive and the inner directive is loaded 10 times. Is there a way to show a loading message in the outer directive till all the inner DOM content is loaded? The docs value is populated by calling a service which populates the values.Right now I have the following code..

Outer Component Template:

@Component ({
  selector: 'app',
  directives: [Component1, Component2],
  template: `
        <div id="parent" class="parentDiv">
            <div id="scrolling">
                <div [hidden]="isLoading">Loading... </div>
                <div id="docs" *ngFor="#doc of docs">
                        <inner-doc *ngFor="#doc of doc.getDoc()" [doc]="doc"></inner-doc>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
  `

Inner Component Template:

@Component ({
  selector: 'inner-doc',
  inputs: ['doc', 'body'],
  template: `
        <div>
            <div class="Title"><div class="titleText" [innerHtml]="getTitle()"></div></div>
            <div class="Body"><div class="bodyText" [innerHtml]="getBody()"></div></div>
</div>
`

Having the following code in outer component using ngAfterViewChecked to switch Loading message once the inner directive gets loaded doesn't work well...

 ngAfterViewChecked(){
  this.isLoading=true;
  this.cdr.detectChanges();
  }
  constructor (cdr: ChangeDetectorRef) {
  this.isLoading=false;
  this.cdr=cdr;
  }

Any help with a working example would be great :)