How to include a loading spinner in an angular application?

Question

I am trying to add a spinner to my application but the spinner is not appearing.

There are no errors appearing in the console or terminal, yet the spinner is not appearing.

loader.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoaderService {
public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

display(value: boolean) {
    this.status.next(value);
}
}

app.module.ts

imported LoadService and added it to the providers array

app.component.ts

import { LoaderService } from './services/loader.service';

export class AppComponent {
  //for the spinner
  showLoader: boolean;
  //LoaderService is for the spinner
  constructor(private loaderService: LoaderService) { }
  //for the spinner
  ngOnInit() {
    this.loaderService.status.subscribe((val: boolean) => {
      this.showLoader = val;
    });
  }
}

app.component.html

<router-outlet>
<div *ngIf="showLoader">
<mat-spinner></mat-spinner>
</div>
</router-outlet>

custom.component.ts

import { LoaderService } from '../services/loader.service';

export class SurveyresultsComponent implements OnInit {

 constructor(private loaderService: LoaderService) { }

 ngOnInit() {
  //http call starts
  this.loaderService.display(true);
  //http call ends
  this.loaderService.display(false);
 }
}

Ali Ben Messaoud · Accepted Answer · 2019-01-14 13:05:51Z

1

I think you are calling your loader service in wrong way.

your loader code logic is

this.loaderService.display(true);
//http call ends
this.loaderService.display(false);

written in custom.component.ts and your HTML code for that is written in app.component.html

try using the same HTML code in custom.component.html or try adding

this.loaderService.display(true);
//http call ends
this.loaderService.display(false);

this logic in app.component.ts or else you could print showLoader value besides that div in app.component.html like {{showLoader}}

edited Jan 14, 2019 at 13:05

Ali Ben Messaoud

11.9k9 gold badges57 silver badges88 bronze badges

answered Feb 22, 2018 at 4:56

Hrishikesh Kale

6,6484 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Steve Doson Over a year ago

I added the div component to the custom.component.html but even then it didn't appear. I have been following the steps of this link hassantariqblog.wordpress.com/2017/03/22/…

Hrishikesh Kale Over a year ago

after printing showLoader value what is it? have you added the right CSS?

Hrishikesh Kale Over a year ago

then there should be a problem with <mat-spinner></mat-spinner> have you tried printing the showLoader value what is it? or else try removing <mat-spinner></mat-spinner> and add only text like LOADING in that div and check if it is working or no.

Steve Doson Over a year ago

I replaced it by <router-outlet> <div *ngIf="showLoader" class="loading">{{showLoader}}</div> </router-outlet> this.

Hrishikesh Kale Over a year ago

Let us continue this discussion in chat.

|

aCiD · Accepted Answer · 2018-02-22 05:18:37Z

1

Looks like a scope issue. An instance of the AppComponent must be available for the subscribe function to use the component's variables. 'this' refers to the scope of the subscribe function.

export class AppComponent {
    //for the spinner
    showLoader: boolean;
    //LoaderService is for the spinner
    constructor(private loaderService: LoaderService) { }

    //for the spinner
     ngOnInit() {
         let self=this;

         this.loaderService.status.subscribe((val: boolean) => {
            self.showLoader = val;
         });
     }
}

answered Feb 22, 2018 at 5:18

aCiD

1,3431 gold badge18 silver badges28 bronze badges

1 Comment

Hrishikesh Kale Over a year ago

no brother the issue was on ngOnIt in custom.component.ts file where he tried calling the function twice with true value first and false value after that so by default showLoader value was setting it to false.

Tushar Adlakha · Accepted Answer · 2023-04-14 06:17:43Z

0

In your Custom.component.ts class, you are calling below 2 statements one after the another, instead you have to use timeout

ngOnInit() {
  //http call starts
  this.loaderService.display(true);
  //http call ends
  setTimeout(() => {
            this.loaderService.display(false);
          },5000);
  
 }

By executing this block, spinner will displayed for 5 Seconds.

edited Apr 14, 2023 at 6:17

answered May 27, 2020 at 11:51

Tushar Adlakha

113 bronze badges

Collectives™ on Stack Overflow

How to include a loading spinner in an angular application?

loader.service.ts

app.module.ts

app.component.ts

app.component.html

custom.component.ts

3 Answers 3

8 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

loader.service.ts

app.module.ts

app.component.ts

app.component.html

custom.component.ts

3 Answers 3

8 Comments

1 Comment

Comments

Linked

Related