DEV Community 👩‍💻👨‍💻

Cover image for Angular Data Doesn't Show
John Peters
John Peters

Posted on • Updated on

Angular Data Doesn't Show

Stack Overflow [Angular] folks often ask:

  • "Why doesn't my View show the data?"
  • "I can see it in the request, and the data is returned but my component doesn't show it".
  • "Why doesn't my data show up?"

Angular Render Events

Angular Rendering runs as soon as the component is displayed. This means any data that requires a Promise or Subscription misses the render event! Angular renders before the data has returned.


-Use *ngIf to hide display until data arrives.

-Use ChangeDetector's detectChanges method after the data arrives. Like this:

    // if *ngIf is missing,
    // the view renders without 
    // waiting for person data
Enter fullscreen mode Exit fullscreen mode

Don't show View until data is ready!

import {
from "@angular/core";
export class myComponent implements OnInit,
//default state is not to show at start.
show = false; 
constructor(private cdf: ChangeDetectorRef);
// a promise example 
getData() {
      this.getPersons().then((persons) => {
         //sets the data sometime later
         this.persons = persons;
         // data is ready, show view! = true;
         // tell Angular to re-render  

// a subscription example
    this.person = result;
    // data is ready show view. = true;
Enter fullscreen mode Exit fullscreen mode

There are other ways but this is a good start.

Top comments (0)

Head to your account's Settings to...

🌚 Enable dark mode
🔠 Change your default font
📚 Adjust your experience level to see more relevant content