CODEWITHSUNDEEP
angularangular2-template
Fabiot
Fabiot

Reputation: 449

How to get in Angular2 the offSetTop of an element without using jQuery

I'm trying to create a directive that will fadeIn a photo slowly when an element is made visible. To do so, my first idea is comparing the position of an item regarding to the top (also checking the height of the window). But I can find how to do that with Angular2.

This is my code so far:

import {Directive, ElementRef, Renderer} from 'angular2/core';

@Directive({
    selector: '[fadeInPhoto]',
    host: {
        '(window:scroll)': 'onScroll()'
    }
})
export class FadeInPhotoDirective{
    private scrollTop: number;
    private initialClass: string;
    constructor(private _el: ElementRef, private _renderer: Renderer){
        this.initialClass = 'thumbnail';
    }

    onScroll(){
        console.log('Photo top:', this._el);
    }
}

But this._el doesn't seem to have any method or property that contains that information.

Upvotes: 20

Views: 44100

Answers (7)

Mukesh Kumar Bijarniya
Mukesh Kumar Bijarniya

Reputation: 466

Try to do it like this: 

import { Component, OnInit, HostListener, ViewChild } from '@angular/core';


    @ViewChild("pageMenu")
      menuStickyElement;

     @HostListener("window:scroll", [])
      sticklyMenu() {
        // Get top height 
        this. offsetTop = document.documentElement.scrollTop
        if (document.documentElement.scrollTop >= this.menuStickyElement.nativeElement.offsetTop) {
          this.stickyNavMenu = true;
        } else {
          this.stickyNavMenu = false;
        }
      }

Upvotes: 0

mohammad ali
mohammad ali

Reputation: 119

in html:

<div (click)="getPosition($event)">xxx</div>

in typescript:

getPosition(event){
    let offsetLeft = 0;
    let offsetTop = 0;

    let el = event.srcElement;

    while(el){
        offsetLeft += el.offsetLeft;
        offsetTop += el.offsetTop;
        el = el.parentElement;
    }
    return { offsetTop:offsetTop , offsetLeft:offsetLeft }
}

Upvotes: 0

Zahra Shokrian
Zahra Shokrian

Reputation: 21

Try using a refrence in your template instead:

<div id='gallery-container' #galleryContainer class='gallery-image-container'>
    <div> <img src="../pic1"></div>
    <div> <img src="../pic2"></div>
    <div> <img src="../pic3"></div>

</div>

And use the ref name as the argument:

@ViewChild('galleryContainer') galleryContainer: ElementRef;

don't Forgot to mention that any view child thus declared is only available after the view is initialized. The first time this happens is in ngAfterViewInit (import and implement the AfterViewInit interface).

then in your template just call the method like this:

<div class="arrow " (click)="topArrowEffect()"  ></div>

and in your controller your method should be like this:

topArrowEffect(){
        this.galleryContainer.nativeElement.scrollTop =10;
}

Upvotes: 1

decebal
decebal

Reputation: 1211

Try to do it like this:

  • make sure to declare the element into the constructor, as "private":

    constructor(private el: ElementRef) { ...}

  • make sure you get the offsetTop after the element(s) already exist on the page:

    ngAfterViewInit() { console.log('el.nativeElement: ', this.el.nativeElement.offsetTop); }

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

The Renderer provides a selection of methods but AFAIK offsetTop is not one of them (they are all just to set values, not to get ones).

You can use instead:

this._el.nativeElement.offsetTop

Upvotes: 13

rbj325
rbj325

Reputation: 984

"offsetTop is relative to it's place in the document, not relative to the view port." -See link below

I was able to get the ACTUAL offsetTop from the top of the document using:

this.element.nativeElement.getBoundingClientRect().top

See: https://stackoverflow.com/a/40877754/1742393

Upvotes: 31

Nige
Nige

Reputation: 1233

I think you should be able to access it like this:

this._el.nativeElement.offsetTop

Upvotes: 0

Related Questions