Ionic 2: Lifecycle hook firing before page has loaded

Question

I am using a package for my layout and I need to javascript call to fire after the elements have all loaded on the page, but I cannot get it to work.

ionViewDidEnter() {
  this.graphs = [];
  // console.log("View Entering", this.iter);
  this.setCurrentPosition();

  this.clientService.clientStream$.subscribe(
    client => {
      this.client = client;  
      this.isLoading = false;
      this.setupGrid();
    }
  )
}

setupGrid() {
  var elem = document.querySelector('.pckry-grid');

  // Prints "setting up grid, null"
  console.log("setting up grid", elem)

  var pckry = new Packery( elem, {
    itemSelector: ".grid-item"
  });
}

Here's the view:

<div class="pckry-grid" *ngIf="!isLoading">
    <div class="grid-item g-col-12">
        ...
    </div>
    <div class="grid-item g-col-12">
        ...
    </div>
    <div class="grid-item g-col-12">
        ...
    </div>
    <div class="grid-item g-col-12">
        ...
    </div>
</div>

Is there a different hook I can use to prevent the setupGrid() function from calling before the elements load?

The best thing is to avoid manipulate the DOM directly. Use Angular's ViewChild. Here is an example, using ViewChild and ngIf https://stackoverflow.com/questions/39366981/angular-2-viewchild-in-ngif — Christian Benseler, Jul 05 '17 at 16:37
hmm.. I'm trying to implement it but can't make it work. Am I supposed to use the `@Viewchild` in lieu of the `*ngIf="!isLoading`. Would you mind converting my html to work with that response? — Jeremy Thomas, Jul 05 '17 at 16:54
You should use ViewChild to get an element, and then use its reference to pass to this new Packery( elem ) - in this case, instead of accessing the DOM via querySelector you would follow 'the Angular way' to get access to elements from the view. — Christian Benseler, Jul 05 '17 at 20:44

Ionic 2: Lifecycle hook firing before page has loaded

0 Answers0