title: ionic 2 render data before view load
body: <p>I am learning ionic 2 and currently facing some ionic lifecycle issue.
  I want to show data after api gets success data.</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {NavController} from 'ionic-angular';
  import {LoadingController} from 'ionic-angular';
  
  import WooCommerceAPI from 'woocommerce-api';
  
  @Component({
    selector: 'page-category',
    templateUrl: 'category.html',
  })
  export class CategoryPage {
  
    information: any[] = [];
    infoChild: any[] = [];
    wooApi: any;
    wooCat: any;
    categories: any = [];
  
    constructor(public navCtrl: NavController, public loadingCtrl: LoadingController) {
        this.wooApi = WooCommerceAPI(
            {
              url: 'abc.com/api/v1/cat',
  
            }
          );
  //here also tried to call api
  
      }
  
  
    ngOnInit() {
  //here also tried to call api
  
    }
    ionViewDidLoad() {
      console.log("calling api");
      /*from with nginit*/
      this.wooApi.getAsync('products/categories?parent=0').then((data) =&gt; {
        console.log("success");
        this.wooCat = JSON.parse(data.body);
        //this.information = this.wooCat;
        for (let i = 0; i &lt; this.wooCat.length; i++) {
          console.log("in for loop");
          this.wooApi.getAsync('products/categories?parent=' + this.wooCat[i].id).then((data) =&gt; {
            console.log("get success", i);
            let wooChild = JSON.parse(data.body);
            for (let x = 0; x &lt; wooChild.length; x++) {
              this.infoChild.push(wooChild[x]['name']);
            }
            //console.log(this.infoChild)
            this.information.push({
              'items': {
                'name': this.wooCat[i]['name'],
                'children': [{
                  'name': this.infoChild
                }]
              }
            });
            this.infoChild = [];
          });
  
        }
        console.log("current data", this.information);
  
      });
  
    }
  
  }
  </code></pre>
  
  <p>I have tried to call api with <strong>constructor()</strong> also with **ngOnInit() &amp; ionViewDidLoad() ** data is getting properly but not reflecting on my view/html page.</p>
  
  <p>My Html code is as follows:</p>
  
  <pre><code>&lt;accordion *ngFor="let catParent of information" [title]="catParent.items.name"&gt;
        &lt;!-- (click)="itemSelected(item)" --&gt;
        &lt;ion-list *ngFor="let catChild of catParent.items.children"&gt;
            &lt;button ion-item *ngFor="let catChildName of catChild.name"&gt;
              {{ catChildName }}
            &lt;/button&gt;
          &lt;/ion-list&gt;
    &lt;/accordion&gt;
  </code></pre>
  
  <p>so when I click on category tab api is calling and getting response but not able to see this result on my view page, now if I click on any other tab and again click on category tab then I am able to see this data.</p>
  
  <p>As I am new to ionic 2 I am not able to fix this issue.
  Can any one please help me to sort out this issue.</p>
  
  <p>Thanks in advance :)</p>