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>
