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