CODEWITHSUNDEEP
angularionic-frameworkionic3
Murlidhar Fichadia
Murlidhar Fichadia

Reputation: 2609

ERROR TypeError: Cannot read property 'style' of undefined - Ionic 3, Angular 4

I get error for setElementStyle, not sure what is wrong, cant find anything on net.

I am following this tutorial : https://www.youtube.com/watch?v=abDaZnx6tkU

import { Directive, Input, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector: '[hide-header]', // Attribute selector
  host: { '(ionScroll)' : 'onContentScroll($event)'}
})
export class HideHeaderDirective {

  headerHeight;
  scrollContent;

  @Input("header") header : HTMLElement;
  constructor(public element: ElementRef, public renderer: Renderer) {
    console.log('Hello HideHeaderDirective Directive');
  }

  ngOnInit(){
    this.headerHeight = this.header.clientHeight;
    this.renderer.setElementStyle(this.header, 'webkitTransition', 'top 700ms');
    this.scrollContent = this.element.nativeElement.getElementsByClassName("scroll-content")[0];
    this.renderer.setElementStyle(this.scrollContent, 'webkitTransition', 'margin-top 700ms');
  }

  onContentScroll(event){
    console.log("Event: "+JSON.stringify(event));
    if(event.scrollTop > 56){
      this.renderer.setElementStyle(this.header, "top","-56px");
      this.renderer.setElementStyle(this.scrollContent, "margin-top","0px");
    }else{
      this.renderer.setElementStyle(this.header, "top","0px");
      this.renderer.setElementStyle(this.scrollContent, "margin-top","56px");
    }
  }

error stacktrace

ERROR TypeError: Cannot read property 'style' of undefined
    at DefaultDomRenderer2.setStyle (platform-browser.es5.js:2872)
    at DebugRenderer2.setStyle (core.es5.js:13733)
    at RendererAdapter.setElementStyle (core.es5.js:10517)
    at HideHeaderDirective.webpackJsonp.276.HideHeaderDirective.onContentScroll (hide-header.ts:37)
    at Object.eval [as handleEvent] (FifteenOffPage.html:10)
    at handleEvent (core.es5.js:12022)
    at callWithDebugContext (core.es5.js:13486)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13074)
    at dispatchEvent (core.es5.js:8615)
    at core.es5.js:10783

updated - html code

<ion-content hide-header [header]="head">
</ion-content>

Event: {"timeStamp":2202730.5850000004,"scrollTop":84,"scrollLeft":0,"scrollHeight":689,"scrollWidth":365,"contentHeight":525,"contentWidth":382,"contentTop":56,"contentBottom":56,"startY":1,"startX":0,"deltaY":83,"deltaX":0,"velocityY":-8.687176879380104,"velocityX":0,"directionY":"down","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__ionScrollfalse":[{"type":"eventTask","state":"scheduled","source":"HTMLElement.addEventListener:ionScroll","zone":"angular","runCount":0}]},"headerElement":{}}

Upvotes: 3

Views: 4164

Answers (2)

Greko2015 GuFn
Greko2015 GuFn

Reputation: 589

This is gonna work:

ngOnInit(): void {
    this.headerHeight = this.header.clientHeight;
    console.log('in ngOnInit',this.header['_elementRef']['nativeElement'])
    this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'webkitTransition','top 700ms');  

}
  onContentScroll(event:any):void{
    if (event.scrollTop > 56) {
      this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'top','-56px');
    }else{
      this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'top','0px');
    }
  }

From the log you will notice that it is where the DOM is located

If it still doesnt work just make sure your #head is in ion-header and remove the mods made above.

Upvotes: 0

Sampath
Sampath

Reputation: 65938

Hope this is the missing part of your code:

i.e. You didn't declare the #head

<ion-header #head>

</ion-header>

Upvotes: 1

Related Questions