Display progress spinner while datas are loading in angular4 application

Question

I have an angular 4 application and I get datas from a database with a springboot application. When I open my application, there is a get which returns data to display on the first page. So, I want to display a progress spinner while the datas are loading and when the datas are loaded, remove the spinner and display the datas.

So, I don't know how to do that. For now, this is my html code (the datas are displayed in visTimeline:

 <md-spinner id="isLoadingSpinner" style="margin:0 auto;"></md-spinner>
 <visTimeline (myTask)="returnTask($event)" [tasks]="tasks"></visTimeline>

And the ts code :

    ngOnInit() {
        this.tasks = this.datasService.getTasks();
        if(this.datasService.isLoading == false){
            document.getElementById("isLoadingSpinner").style.display = "none";
        }
    }

And this is the get in the datas.service :

    getAffectationsFromDataBase() {
  this.http.get('http://localhost:8081/affectation/findAll').map((response:Response) => {
        this.tasks.tasks = this.transformAffectations(response.json().affectations);
    }).subscribe(result =>  this.isLoading = false);
}

So, I try with if in the ngOnInit function and with a while but it doesn't work. Do you know how I can do that ?

Did you tried with adding a *ngIf="isLoading" instead of your id? Using ids is bad practise since they are global accross the dom. — Gambo, Jul 21 '17 at 08:50
Yes, I think of this but how can I use the variable 'isLoading' from datas.service.ts in the html code of another component ? I tried this.datasService.isLoading but it's not working — Adrien, Jul 21 '17 at 08:52

score 1 · Accepted Answer · answered Jul 21 '17 at 09:54

The reason why it does not work is because the ngOnInit() method is synchronous and so it runs on the initialization of the page without waiting for any response.

You can use the [hidden] directive or *ngIf to solve this problem with the condition being the boolean from your "datasService" class. Adjust your HTML code in one of the following ways:

 <md-spinner [hidden]="!datasService.isLoading" id="isLoadingSpinner" style="margin:0 auto;"></md-spinner>

or

<md-spinner *ngIf="datasService.isLoading" id="isLoadingSpinner" style="margin:0 auto;"></md-spinner>

With one of these implementations you don't need to check the condition in ngOnInit();

score -1 · Answer 2 · answered Jul 21 '17 at 08:46

-1

I wrote a post here asking about how to do something in Ionic, based on the way you do things in Angular here. It covers your needs. Router Data Resolvers

answered Jul 21 '17 at 08:46

JGFMK

8,425
4
58
92

Could you explain what you did ? I don't really understand – Adrien Jul 21 '17 at 09:51
A router isa traffic cop handling navigation. router.config.ts in wired into app-module.ts. So when url has /test/1 ,id = 1. The call is made into the service layer for record with id of via the resolver. That's an asynchronous process. Loading component.ts observes events router emits and uses it to conditionally control rendering of spinning cog. The dictionary 'key' in the router.config.ts is used by your data component.. So data-component.html includes the snippet loading-component.html. That same 'key' in the router.config.ts points to the data-component-resolver.ts – JGFMK Jul 21 '17 at 10:15
I'd like to know why I got a negative feedback on this, since it's a valid method.. – JGFMK Jul 21 '17 at 16:41
I don't know, it's not me, but I validated the answer from 'thatGirl' because it works and it's easiest.. – Adrien Jul 24 '17 at 07:54

Display progress spinner while datas are loading in angular4 application

2 Answers2