How to get ion-header height in Angular (the right way)?

In my app I need to get the height of an ion-header element. I’ve tried with:

<!-- TEMPLATE -->
<ion-header #header>
  <!-- ... -->
<ion-header>
<!-- ... -->
// COMPONENT
ViewChild('header') header: IonHeader;
// ...
getHeaderHeight() {
  return this.header.el.offsetHeight;
}

This only works if header's type is any. If it is IonHeader it throws this error:

Property 'el' is protected and only accessible within class 'IonHeader' and its subclasses.

The error is pretty clear. What bugs me is the fact that there should be a non-hacky way to do this. Using any just feels like cheating.

Just read the element as an Element Ref…

@ViewChild('header') header: ElementRef

getHeaderHeight(){
  return this.header.nativeElement.offsetHeight;
}
1 Like

It’s not working. this.header.nativeElement.offsetHeight throws this error:

TypeError: Cannot read property 'offsetHeight' of undefined

I console-logged this.header and this.header.nativeElement:

  • this.header
IonHeader {z: NgZone, el: ion-header.md.header-md.header-collapse-none.hydrated, __ngContext__: LComponentView_ElementComponent(197)}
collapse: (...)
mode: (...)
translucent: (...)
z: NgZone {hasPendingMacrotasks: false, hasPendingMicrotasks: false, isStable: true, onUnstable: EventEmitter, onMicrotaskEmpty: EventEmitter, …}
el: ion-header.md.header-md.header-collapse-none.hydrated
__ngContext__: LComponentView_ElementComponent(197) [app-element.ion-page, TView, 147, LRootView(30), null, LQueries_, TNode$1, LCleanup(12), ElementComponent, {…}, AnimationRendererFactory, BaseAnimationRenderer, null, LComponentView_IonHeader(20), LContainer(39), LRootView(30), LComponentView_ElementComponent(197), null, 0, LComponentView_IonHeader(20), IonHeader, LComponentView_IonToolbar(20), LComponentView_IonButtons(20), LComponentView_IonButton(20), LComponentView_IonIcon(20), LComponentView_IonTitle(20), text, LComponentView_IonButtons(20), LComponentView_IonButton(20), LComponentView_IonIcon(20), LComponentView_IonButton(20), LComponentView_IonIcon(20), LComponentView_IonContent(20), LComponentView_IonSlides(20), IonSlides, LContainer(9), LContainer(39), KeyValuePipe, true, 0, 30, false, false, Array(30), {…}, {…}, {…}, 0, 131072, 0, 0, 0, 0, 0, 0, 65556, IonHeader, 16, 131072, 0, 0, 0, 0, 0, 0, 47, IonToolbar, 144, 131072, 0, 0, 0, 0, 0, 0, 57, IonButtons, 16777360, 131072, 0, 0, 0, 0, 0, 0, 67, IonButton, 553648272, 131072, 0, 0, 0, 0, 0, 0, 77, IonIcon, 144, 131072, 0, …]
__proto__: Object
  • this.header.nativeElement
undefined

I don’t know what I’m doing wrong. This kind of stuff sounds pretty basic. I read somewhere else about ElementRef, but when I tried it threw that error and thought I was doing it wrong.

I’m using @angular/core 9.1.0 and @ionic/angular 5.0.5, and serving it to Chrome to test it. Do you need any other information?

Make sure that you are executing above method in ngAfterViewInit() {}

Solved it. It was just what you said, but had to add { read: ElementRef } to the ViewChild. Otherwise, it read the IonHeader. Thanks :+1: