how do you wait for data to load before view in angular 2

Question

Component:

export class HomeComponent implements OnInit {

  tridentData: TridentData;

  constructor(private tridentServices: TridentService) { }

  ngOnInit() {
    this.tridentServices.getTridentData()
                    .subscribe(
                      (data: TridentData) => {
                        this.tridentData = data;
                      }
                    )
  }
}

HTML:

<h1>{{ tridentData }}</h1>   <---results in undefined

The Problem:

I am calling getTridentData() (A GET request, that returns json) on my tridentData object. I am having a ASYNC problem where the view loads before my tridentData object can retrieve the data the db. This results tridentData in undefined and my whole page breaks. How do I implement a loading animation and have the view wait for the data to load before popping in?

Answer 1

On your template you can add a condition to the h1 tag :

<h1 *ngIf="tridentData">{{ tridentData }}</h1>

Answer 2

We'd need to see your getTridentData() code to be sure but really what you probably want to do is use the async pipe.

{{ tridentData | async }}

Answer 3

      showTridentData:Promise<boolean>;

      ngOnInit() {
        this.tridentServices.getTridentData()
                        .subscribe(
                          (data: TridentData) => {
                            this.tridentData = data;
                            this.showTridentData=Promise.resolve(true);
                          }
                        );
      }

in your HTML use as this

 <h1 *ngIf="showTridentData | async">{{tridentData}}</h1>