How to Retrieve Element's Boundaries in Angular 2 Component

Question

How to Retrieve Element's Boundaries in Angular 2 Component

I am working on a component that functions as a popover. Here is the structure of the component:

import {Component, Input, ViewChild} from 'angular2/core'

declare var $: any;

@Component({
  selector: 'popover',
  template: `
  <div id="temp" [ngStyle]="{'position':'absolute', 'z-index':'10000', 'top': y + 'px', left: x + 'px'}"
       [hidden]="hidden" #temp>
    <ng-content></ng-content>
  </div>
  `
})
export class Popover {

  @ViewChild("temp") temp;

  private hidden: boolean = true;
  private y: number = 0;
  private x: number = 0;

  show(target, shiftx = 0, shifty = 0){
    let position = $(target).offset();
    this.x = position.left + shiftx;
    this.y = position.top + shifty;
    this.hidden = false;

    console.log("#temp", this.temp.nativeElement.getBoundingClientRect()); //all 0s
    console.log("temp id", document.getElementById('temp').getBoundingClientRect()); //all 0s
  }

  hide(){
    this.hidden = true;
  }
}

In the show() function, I am trying to access the value of getBoundingClientRect(), but it returns all zeros for the properties. However, when I execute

document.getElementById("temp").getBoundingClientRect()

in Chrome's console, I get the actual values. Why is there a discrepancy and how can I retrieve the accurate values within my component?

javascript typescript angular

Answer 1

Answer №1

My approach to solving the problem involved using the Renderer in Angular instead of relying on setTimeout or lifecycle hooks that could be triggered multiple times.

import { OnInit, Renderer2} from '@angular/core';

...

export class MyComponent implements  OnInit {

    constructor(private el: ElementRef, private render: Renderer2) {}

    ngOnInit() {
        this.render.listen('window', 'load', () => {
            const rect = this.el.nativeElement.getBoundingClientRect().top;
        })
    }

}

This technique might prove useful for someone facing a similar issue.

Answer 2

My approach to solving the problem involved using the Renderer in Angular instead of relying on setTimeout or lifecycle hooks that could be triggered multiple times.

import { OnInit, Renderer2} from '@angular/core';

...

export class MyComponent implements  OnInit {

    constructor(private el: ElementRef, private render: Renderer2) {}

    ngOnInit() {
        this.render.listen('window', 'load', () => {
            const rect = this.el.nativeElement.getBoundingClientRect().top;
        })
    }

}

This technique might prove useful for someone facing a similar issue.

Answer 3

Answer №2

After the content was displayed, there seemed to be a delay in the DOM update, but using a setTimeout with a delay of 10 resolved the issue.

Answer 4

After the content was displayed, there seemed to be a delay in the DOM update, but using a setTimeout with a delay of 10 resolved the issue.

Answer 5

Answer №3

For handling content checking in Angular, I recommend using ngAfterContentChecked() as it has worked flawlessly for me every time.

import { AfterContentChecked } from '@angular/core';

export class ModelComponent implements AfterContentChecked {
   ngAfterContentChecked() {
        // Add your code here
    }
}

I trust this suggestion will be useful to you. 😊

Answer 6

For handling content checking in Angular, I recommend using ngAfterContentChecked() as it has worked flawlessly for me every time.

import { AfterContentChecked } from '@angular/core';

export class ModelComponent implements AfterContentChecked {
   ngAfterContentChecked() {
        // Add your code here
    }
}

I trust this suggestion will be useful to you. 😊

Answer 7

Answer №4

When it comes to this scenario, the ngAfterContentChecked function is what you need. As explained earlier.

The ngAfterContentChecked hook method is the final step in the lifecycle before the ngOnDestroy kicks in. For more information on Lifecycle Hooks, check out the details here.

It's important to handle tasks with caution here, as they could potentially impact performance.

Timing

This function is called after ngAfterViewInit() and each subsequent ngAfterContentChecked().

Answer 8

When it comes to this scenario, the ngAfterContentChecked function is what you need. As explained earlier.

The ngAfterContentChecked hook method is the final step in the lifecycle before the ngOnDestroy kicks in. For more information on Lifecycle Hooks, check out the details here.

It's important to handle tasks with caution here, as they could potentially impact performance.

Timing

This function is called after ngAfterViewInit() and each subsequent ngAfterContentChecked().

How to Retrieve Element's Boundaries in Angular 2 Component

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to make the parent elements invisible when there are no child elements present?

Can I include a different website within an Angular project?

Tips for effectively navigating search results with pagination

Unfortunately, the utilization of an import statement outside a module is restricted when working with Electron

When utilizing mergeMap() in conjunction with a subject, the takeWhile() condition set on the observable being merged is disregarded

The ng-disabled directive appears to be malfunctioning

What is the best way to send data from a child component to a parent component in Angular 2?

The styles are not being rendered on the Angular application

The controller's AngularJS function seems to be unresponsive

What causes TypeScript to narrow the type when a return statement is present, but not when it is absent?

Retrieve() displays solely the initial array within an object

Conceal Tooltips with Materialize CSS

When creating nested objects, the defineproperty function on the object prototype does not trigger

Node.js client-sessions malfunction when not utilized as a primary callback

No data returned when fetching with server-side rendering (SSR) requested

What is the best way to conditionally wrap a useState variable in an if statement without losing its value when accessing it outside the if block in reactjs?

Encountering an "Unsupported Media Type" error while attempting to generate an Hpalm defect through the rest api

Using vuex-class to interact with Vuex in non-Vue components

An alternate solution for achieving synchronous behavior in form submit button click event handling without using the async: false option

What is the most efficient way to implement OR conditions in JavaScript for shorter code