this.content.getContentDimensions() is not working on app.component.ts


#1

How do I get height of ion-menu, I’m not able to set dynamic height of menu list item.

app.html

        <ion-col col-4>
          <div  text-left class="header-style">
            <img class="rti-logo" src="assets/img/logo/logo-rti.png">
          </div>

        </ion-col>
        <ion-col col-7>
          <div text-left class="header-style">
            {{profileDisplayName}}
          </div>
          <!-- <div style="display:none;" class="sub-header-style" no-margin>
            {{profileEmail}}</div> -->
        </ion-col>
        <ion-col col-1>
            <div class="close-icon-style">
                <button ion-button menuClose>
                  <ion-icon name="ios-close"></ion-icon>
                </button>
              </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-header>
<ion-content   overflow-scroll="false" class="menu-background">
  <ion-grid class="grid-style" no-padding>
    <ion-row class="menu-list padding-left-10" >
      <button icon-start class="cust-list-item" menuClose="left" detail-none *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon class="nav-icon-style" [name]="p.icon"></ion-icon>
        <span>
       {{p.title}}
        <ion-badge *ngIf="p.isBadge" item-end class="badge-style">{{badgeCount}}</ion-badge>
        </span>

      </button>
    </ion-row>
  </ion-grid>
</ion-content>

on app.component.ts
@ViewChild(Content) content: Content;
@ViewChild(‘sideMenuPageHeader’) sideMenuPageHeader: ElementRef;
.
.
.

document.getElementById(“sideMenuPageHeader”).offsetHeight;
this.content.getContentDimensions()
.
.
.

 ngAfterContentInit(){
    console.log('test ion view did');
    
var height = this.sideMenuPageHeader.nativeElement.offsetHeight;
  console.log(height);
  setTimeout(() => {
    console.log('height');
    console.log(this.content.getContentDimensions());
  }, 5000);
  
   // console.log(document.getElementById("sideMenuPageHeader"));
   // console.log('obj height'+this.content.getContentDimensions());
}

RESULT:

contentBottom:0
contentHeight:0
contentLeft:0
contentTop:0
contentWidth:0
scrollHeight:0
scrollLeft:0
scrollTop:0
scrollWidth:0