to implement a spinner in angular2+

Question

I am trying to use a spinner in my application because there is lots of data that takes time to load. But here is the issue. I have taken this link as reference -

Pre-Bootstrap Loading Screen For Angular2

But the spinner keeps on and on and has occupied a fixed place in table body , it doesn't disappear as the data loads completely. In the article above shown they have mentioned that using

 <app></app> 

or

 <my-app></my-app> 

 (or probably 

 <app-root></app-root> 

  also)  

Angular will automatically replace "Loading..." by the real content once Angular is loaded. However , this doesn't apply in my program. I have also used a boolean variable to hide when the variable is false. But to no avail. Please check my code and guide accordingly.

transaction.component.html

 <table>
 <thead> ....
 </thead>

     <my-app>
      <div class="loaded" [class.loaded]="loaded">
      <div class="text-center">
       <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <div>Something witty for your userbase</div>
       </div>
      </div>
    </my-app>

  <tbody>
        .....
  </tbody>
   <table>

transaction.component.ts

 export class TransactionComponent implements OnInit {
 public loaded=false;


 ngOnInit() {

 this.loaded=true;


  }

 insideSearchByText(filterObj) {

    this.http.post("http://" + url + ":" + port + 
   "/transaction/masterSearchTransactionForm/", this.filterObj
      , { headers: new Headers({ 'Authorization': 'Bearer ' + 
    localStorage.getItem('Token') }) })
   .map(result => this.result = result.json(),

    this.loaded=false)

    .subscribe((res: Response) => {
    ....
    }});
    }

Error

 ERROR Error: Uncaught (in promise): Error: Template parse errors:
 'my-app' is not a known element:
 1. If 'my-app' is an Angular component, then verify that it is part 
 of 
 this module.
 2. If 'my-app' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' 
 to 
 the '@NgModule.schemas' of this component to suppress this message. 
 ("


  [ERROR ->]<my-app></my-app>

Answer 1

<div class="loaded" [class.loaded]="loaded" *ngIf="!loaded">
  <div class="text-center">
    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    <div>Something witty for your userbase</div>
  </div>
</div>

You can show the element only when the loading is occurring so ngIf should be enough.

If the loaded class doesn't contain anything, you probably don't need the wrapper. I don't know what styles are there.

Or post the link to the bootstrap component you are trying to use, if this is not enough for you.