Display loader during data retrieval in Angular 2

In my loader.component.ts file, I have defined the selector as <app-loader>.

The <app-loader> tag is located in the main-component.html file and is displaying correctly.

<app-loader *ngIf="!showLoader === true">

I want the loader to only appear when I am fetching data.

Here is the code I am using to fetch data:

showLoader = true;    
ngOnInit() {
        this.httpService.getOffer()
          .subscribe(
            data => this.offers = data
          )
        this.showLoader = false;
      }

Even though I have set the showLoader variable to true and then false after fetching the data, it is not working as expected. What could be the issue?

angulartypescript

Answer №1

Simply move the line this.showLoader = false; into the subscribe block's success and err functions. Due to the asynchronous nature of JavaScript, your showLoader variable gets set to false before the backend call is completed.

Consider using a basic ngIf condition instead.

<app-loader *ngIf="showLoader">

Answer №2

To make the spinner disappear once the data has been received or when an error occurs, you can follow these steps:

showSpinner = true;    

ngOnInit() {
  this.httpService.getOffer()
      .subscribe(
        data => {
          this.offers = data;
          this.showSpinner = false;
        },
        error => this.showSpinner = false
      )
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In React Native, you can pass native component properties as props, while also defining custom ones using a TypeScript interface

I am working on a component called AppText where I need to utilize a Props interface and also be able to accept additional props that can be spread using the spread operator. However, I encountered this error: Type '{ children: string; accessible: tru ...

javascriptreactjstypescriptreact-native

Does the JavaScript Amazon Cognito Identity SDK offer support for the Authorization Code Grant flow?

Is there a way to configure and utilize the Amazon Cognito Identity SDK for JavaScript in order to implement the Authorization Code Grant flow instead of the Implicit Grant flow? It appears that the SDK only supports Implicit Grant, which means that a Clie ...

typescriptamazon-web-servicesamazon-cognito

How and where should you define the Angular catch all route for handling page not found errors?

In my project, I have a primary app.routing.module.ts with the following configuration: const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'login', component: LoginComponent }, { path: '', re ...

angularroutesangular5angular2-routingangular-routing

Choose a single asset from the list of values stored in the Map

I'm looking to implement something similar to the following: let myMap = new Map<string, any>(); myMap.set("aaa", {a: 1, b: 2, c:3}); myMap.set("bbb", {a: 1, b: 2, c:6}); myMap.set("ccc", {a: 1, b: 2, c:9}); let cs = myMap.values().map(x => ...

javascripttypescriptdictionary

I am searching for the RowEnter and RowLeave events in a kendo-grid for Angular 2. Where can I find them

When using an ODATA bound Kendo UI Angular 2 table, I am facing the challenge of needing to save the data that a user edits inline on a per row basis instead of per cell. If only there were RowEnter and RowLeave events available for me to achieve this. Do ...

angularevent-handlingkendo-griddatarowinline-editing

Am I on track with this observation?

I am currently using the following service: getPosition(): Observable<Object> { return Observable.create(observer => { navigator.geolocation.watchPosition((pos: Position) => { observer.next(pos); observer.c ...

javascripttypescriptgeolocationangularrxjs

Deploying an Angular 6 application on GitHub Pages

I've been struggling to successfully deploy my application on Github Pages. I have a hosted repository that I used for testing purposes, and I followed all the necessary steps to get the application up and running, but unfortunately, everything I&apo ...

node.jsangulargitangular-cli-ghpages

Steps to Export Several Fusion Charts into Individual Image Files

My webpage contains multiple charts created using the Fusion Chart library. There are three different charts on the page, and I want to export each chart as a separate PNG file. However, when I click the export button, it generates separate images of the ...

javascriptjqueryangularfusioncharts

Encountering a configuration error in the Nginx.conf file while attempting to use

I recently obtained a Visual Studio solution that includes multiple projects. https://i.sstatic.net/HuRyl.jpg A Nginx.conf file was created in ClientApp/Angular. https://i.sstatic.net/CN65e.jpg This is my docker-compose file: clientapp: image: ${DOCKER ...

angulardockernginxdocker-compose

Increasing a value within HTML using TypeScript in Angular

I'm working with Angular and I have a TypeScript variable initialized to 0. However, when trying to increment it using *ngFor in my .ts file, the increment is not happening (even though the loop is running correctly). my-page.html <div *ngFor=&quo ...

javascriptangulartypescriptngforstring-interpolation

Unable to assign the selected attribute to a dynamically loaded Ion-select component in Ionic 2

I'm facing an issue with dynamically loading <ion-select> and setting default selection using the selected attribute. It doesn't seem to work as expected. Can anyone help me understand why? You can view the code on Plunker app/home.page.h ...

angularionic-frameworkionic2

Having trouble utilizing Vue3 methods while utilizing the `<script setup lang="ts">` syntax

Looking to incorporate Vue into a non-Vue Class using the Composition API for a Chrome Extension project where having the entire thing as a Vue App doesn't make sense. The Vue Instance is being instantiated in the usual manner and then injected into ...

typescriptvue.jsvuejs3

The functionality of *ngIf fails to display the template when the array is void of any elements

view image descriptionHello, I am new to using Angular and I'm encountering an issue with the ngIf directive not working as expected in the tutorial. I have included my code snippets below. Any assistance would be greatly appreciated. My component: i ...

angular

Using both Angular material design and Bootstrap together can provide a seamless

Is it feasible to integrate material design into an Angular app alongside bootstrap without any complications? I am aiming to leverage the grid system of twitter-bootstrap and incorporate the dialogues from material design... ...

twitter-bootstrapangularangular-material2

Strategies for adding elements to a FormArray in Angular 4

I am currently working on a dynamic Angular form that displays like this. <form [formGroup]="myForm"> <div *ngFor="let Repo of Repos;"> <fieldset> <legend>{{Repo.name}}</legend> ...

angulartypescriptformarray

Validation of passwords in reactive forms using Angular Material Design Lite

I have a password field with specific validation requirements: The password must be alphanumeric It cannot consist solely of characters or numbers <p> <mdl-textfield label="Password" ...

javascriptangularangular-mdl

Using Typescript to Convert JSON Data into Object Instances

My challenge involves a Json object structure that looks something like this: { "key" : "false", "key2" : "1.00", "key3" : "value" } I am seeking to convert this in Typescript to achieve th ...

jsontypescript

Creating a custom React hook in TypeScript to handle mouse events

I have been working on creating a custom hook in TypeScript/React, and I am looking to convert the code snippet below into a custom hook. Currently, I am passing handleClick to the onClick attribute in a div element to detect user clicks and route them to ...

reactjstypescriptreact-hooksreact-routernext.js

What is the most effective way to condense these if statements?

I've been working on a project that includes some if statements in the code. I was advised to make it more concise and efficient by doing it all in one line. While my current method is functional, I need to refactor it for approval. Can you assist me ...

javascriptreactjstypescript

The property xyz is not found in the type 'IntrinsicAttributes & interface abc'

I have an array of objects structured like this: const data = { "Large_Plates": [ { "name": "Cauliower/ Shanghai Fried rice with stir fry vegetables", "id": "1", "price_Veg&quo ...

reactjstypescript