Receiving IonHeader instead of HTMLElement

@amard wrote:

I am trying to hide the header on scroll, through this directive.

That code works well in Ionic 3(Ionic Framework : ionic-angular 3.5.3)

It is not working in Ionic 4(Ionic Framework : @ionic/angular 4.1.1).

The directive(check the link above) has the variable header(of type HTMLElement) as an @Input.

In Ionic 3, console.log(header) gives

<ion-header class="header header-md" style="top: 0px;"></ion-header>

In Ionic, console.log(header) gives IonHeader.

The following code works on Ionic 3 but throws an error on Ionic 4:

this.renderer.setElementStyle(this.header, ‘webkitTransition’, ‘top 700ms’);

Error:

ERROR TypeError: Cannot set property ‘webkitTransition’ of undefined
at EmulatedEncapsulationDomRenderer2.push…/node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setStyle (platform-browser.js:1118)
at DebugRenderer2.push…/node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setStyle (core.js:24333)
at RendererAdapter.push…/node_modules/@angular/core/fesm5/core.js.RendererAdapter.setElementStyle (core.js:21869)
at HideHeaderDirective.push…/src/app/directives/hideheader/hide-header.directive.ts.HideHeaderDirective.ngOnInit (hide-header.directive.ts:39)
at checkAndUpdateDirectiveInline (core.js:22098)
at checkAndUpdateNodeInline (core.js:23362)
at checkAndUpdateNode (core.js:23324)
at debugCheckAndUpdateNode (core.js:23958)
at debugCheckDirectivesFn (core.js:23918)
at Object.eval [as updateDirectives] (ExplorePage.html:27)

Apparently, the setElementStyle sets the style of an HTML element. It works fine when it is <ion-header> but it throws the above error when it is of type IonHeader. Someone please help me with this?

Posts: 1

Participants: 1

Read full topic