I want my component not to render if data is not received from api in angular 2

Question

In my angular 2 application I am fetching navigation data from my database with the help of a web API. I have written the code to fetch the data from the web API in a ngOnInit function in my navigation component.

Is there any way to keep waiting until the data is not received so that the user doesn't see the page without the navigation menus?

ye, use `*ngIf` in your navigation menu. E.g: `*ngIf="navigationData"` — FAISAL, Sep 05 '17 at 11:12
Possible duplicate of [Wait for Angular 2 to load/resolve model before rendering view/template](https://stackoverflow.com/questions/34731869/wait-for-angular-2-to-load-resolve-model-before-rendering-view-template) — mxr7350, Sep 05 '17 at 11:16

score 0 · Answer 1 · answered Sep 05 '17 at 11:19

You can put *ngIf or [hidden] in the view part untill data is gets loaded from the web API, once data get successfully you can toggle variable and view data accordingly like this

viewData: boolean = false;

ngOnInit(){
  ...httpCall(){
    if(success)
      this.viewData = true;
  }
}

In the view part set condition on the BoxListContainer

<div *ngIf='viewData'>
  ....... your content here
</div>

score 0 · Answer 2 · answered Sep 05 '17 at 19:53

0

In the OnInit function use a spinner to disable the entire page as the content loads. Make an HTTP call to the API and in the complete callback disable the spinner.

answered Sep 05 '17 at 19:53

Vinorth

968
8
13

I want my component not to render if data is not received from api in angular 2

2 Answers2