Angular2 watching parent's css attribute

Question

I have a directive which adds the number of pixels corresponding to its parent right css attribute

import { Directive, ElementRef, AfterViewInit } from "angular2/core"

 @Directive({
     selector: "[d]"
 })
 export class PositioningFromParent implements AfterViewInit {
     private el:HTMLElement

    constructor(el: ElementRef) {
        this.el = el.nativeElement
    }

    ngAfterViewInit() {
      let v = this.el.parentNode.getBoundingClientRect().right
      this.el.style[left] = v + "px"
    }
 }

It works just fine. However, if I do resize my window, my parent is changing and its right value as well. My directive doesn't adapt that value at the minute. How could I watch the this.el.parentNode.getBoundingClientRect().right value in Angular2 ?

Thanks

Community · Accepted Answer · 2017-05-23 12:09:51Z

2

Listen to resize and update when the event is fired:

 @Directive({
     selector: "[d]"
 })
 export class PositioningFromParent implements AfterViewInit {
     private el:HTMLElement

    constructor(el: ElementRef) {
        this.el = el.nativeElement
    }

    ngAfterViewInit() {
      this.updateLeft();
    }

    @HostListener('window:resize') 
    updateLeft() {
      let v = this.el.parentNode.getBoundingClientRect().right
      this.el.style[left] = v + "px"
    }
 }

See also angular2: How to use observables to debounce window:resize to limit the rate the code is executed during resize.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jul 5, 2016 at 14:19

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 watching parent's css attribute

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related