Angular does not display HTML content until the requested http data has been fully loaded

Question

Angular does not display HTML content until the requested http data has been fully loaded

I am experiencing an issue where certain HTML content does not load until the component has received data from an API call through a service.

Below is the relevant code snippet:

import { ApiService } from './services/api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  thedata;

  subscription: Subscription;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.getData();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }


  getData() {
    this.apiService.getUsers().subscribe(
      (res) => {
        this.thedata = [res];
      },
      (err) => {
        console.log('There was an error: ' + err);
      }
    )
  }

}

Then in the HTML file:

<div *ngFor="let data of thedata">
   <!-- other elements here and below -->
    {{ data.name }}
</div>

The issue I'm facing is that the visual elements do not render until the data has finished loading. Is there a way to display the HTML content while the data is still being fetched from the API?

angular typescript rxjs

Answer 1

Answer №1

The issue at hand is the lack of data during the initialization of your component.

You can simplify the process by using the async pipe, which handles subscription and unsubscription automatically. Additionally, it ensures that the data is loaded before passing it to the loop.

Component:

import { DataService } from './services/data.service';

export interface DataModel {
  title: string;
}

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent {

  myData: Observable<DataModel[]>;

  constructor(private dataService: DataService) {
    this.myData = this.dataService.fetchData(); // Expected return is an array of objects ///
  }
}

Template:

<div *ngFor="let item of myData | async">
   <!-- other elements go here -->
    {{ item.title }}
</div>

Answer 2

The issue at hand is the lack of data during the initialization of your component.

You can simplify the process by using the async pipe, which handles subscription and unsubscription automatically. Additionally, it ensures that the data is loaded before passing it to the loop.

Component:

import { DataService } from './services/data.service';

export interface DataModel {
  title: string;
}

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent {

  myData: Observable<DataModel[]>;

  constructor(private dataService: DataService) {
    this.myData = this.dataService.fetchData(); // Expected return is an array of objects ///
  }
}

Template:

<div *ngFor="let item of myData | async">
   <!-- other elements go here -->
    {{ item.title }}
</div>

Answer 3

Answer №2

If thedata remains empty, the *ngFor loop will not execute, preventing any content within the div from being added to the DOM. To display content while data is loading, it must be placed outside of the *ngFor loop.

Answer 4

If thedata remains empty, the *ngFor loop will not execute, preventing any content within the div from being added to the DOM. To display content while data is loading, it must be placed outside of the *ngFor loop.

Answer 5

Answer №3

It is not possible to display the "repeater template" in the DOM when using the *ngFor directive, as it creates repeated elements based on the number of items in your array.

To work around this and simulate the presence of items before receiving the API response, you can initialize the array with dummy data in your TypeScript code like so:

thedata = [1,2,3,4,5,6]

Answer 6

It is not possible to display the "repeater template" in the DOM when using the *ngFor directive, as it creates repeated elements based on the number of items in your array.

To work around this and simulate the presence of items before receiving the API response, you can initialize the array with dummy data in your TypeScript code like so:

thedata = [1,2,3,4,5,6]

Answer 7

Answer №4

Give this a shot:

.ts

 fetchData() {
const that = this;   //<====== include this line
    this.apiService.getPosts().subscribe(
      (response) => {
      console.log(JSON.stringify(response)); <======
        that.fetchedData = [response];    
      },
      (error) => {
        console.log('An error occurred: ' + error);
      }
)

}

.html

<ng-container *ngIf="fetchedData">
<div *ngFor="let item of fetchedData">
   <!-- more elements here and below -->
    {{ item?.title }}
</div>
</ng-container>

Answer 8

Give this a shot:

.ts

 fetchData() {
const that = this;   //<====== include this line
    this.apiService.getPosts().subscribe(
      (response) => {
      console.log(JSON.stringify(response)); <======
        that.fetchedData = [response];    
      },
      (error) => {
        console.log('An error occurred: ' + error);
      }
)

}

.html

<ng-container *ngIf="fetchedData">
<div *ngFor="let item of fetchedData">
   <!-- more elements here and below -->
    {{ item?.title }}
</div>
</ng-container>

Angular does not display HTML content until the requested http data has been fully loaded

Answer №1

Answer №2

Answer №3

Answer №4

Give this a shot:

.ts

.html

Similar questions

Showcasing an input field once a specific button is pressed in an Angular application

Why aren't the validations being set when creating Angular forms using formControl.values?

Issue with PrimeReact dropdown component not recognizing an array in TypeScript

Even when there is a change in value within the beforeEach hook, the original value remains unchanged and is used for dynamic tests

There seems to be an issue with transitioning the React.js page

Unusual behavior when importing in Angular 2 using TypeScript

How to set up an Angular ErrorHandler?

Verify if the property in every element of the array is not empty

Error message: "Uncaught TypeError in NextJS caused by issues with UseStates and Array

Creating an ESNext JavaScript file and integrating it into an Angular 2 project: A comprehensive guide

Creating various styles for cards using ngFor within Angular

Coding with Angular 4 in JavaScript

Flux Utils identified an issue stating that the Class constructor App cannot be called without the 'new' keyword

Guide on toggling the button by clicking on the icon to turn it on or off

Exploring Angular: How to Access HTTP Headers and Form Data from POST Request

How come TypeScript tuples support the array.push method?

Issue NG0203 encountered during material import attempt

What is the best way to switch the direction of the arrows based on the sorting order?

Having trouble with React npm start: 'No chokidar version found' error occurring

Poorly packaged library - Custom Angular library - Node Package Manager