1

I have an ion-row inside an ion-grid, and the elements inside the ion-row are displayed dynamically following some conditions.

My objective is to retrieve the height of the ion-row once all the conditions are computed and the final view is rendered:

<ion-grid>
  <ion-row #elementContainer>
    <!-- Elements here are displayed dynamically -->
  </ion-row>
</ion-grid> 

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  //...
})
export class ConversationCardPage implements AfterViewInit {

    //...
    @ViewChild("elementContainer", { read: ElementRef }) elementContainer: ElementRef;

    ngAfterViewInit() {
        console.log(this.elementContainer && this.elementContainer.nativeElement
           ? this.elementContainer.nativeElement.clientHeight
           : -1)
    }

}

Logging this code, I always get the value 0 as the height of the elementContainer, but if I change the ngAfterViewInit to ngDoCheck or ngAfterContentChecked, I get the proper height of the element.

As mentioned in the Angular Docs, the ngDoCheck has a cost regarding performance, and I would like to stick with the ngAfterViewInit since it is supposed to be called once the view is initialized:

While the ngDoCheck() hook can detect when the hero's name has changed, it has a frightful cost. This hook is called with enormous frequency—after every change detection cycle no matter where the change occurred. It's called over twenty times in this example before the user can do anything.

Strider
  • 3,539
  • 5
  • 32
  • 60
  • Can you give whole code? How does code inside `` renders? When? By inputs? Asynchronous? Because it seems like there is nothing to render during `ngAfterViewInit`. Try do `console.log(this.elementContainer)` on `ngAfterViewInit` and check if there are any elements inside – web.dev Jun 15 '19 at 15:58

0 Answers0