What is the best way to retrieve the dimensions of an Angular 5 Component prior to displaying it on the screen?

Question

What is the best way to retrieve the dimensions of an Angular 5 Component prior to displaying it on the screen?

I am currently working on integrating a generic tooltip feature in Angular 5. In order to ensure proper positioning, especially centering relative to the target element, I need to obtain the width and height of the tooltip before it is rendered.

While I have already discovered how to acquire the dimensions of a component from this particular question, my challenge lies in setting the tooltip content first (allowing the browser to determine the size) for position calculation. Subsequently, I aim to set the position and apply a class for display.

Below is an excerpt of the code I am working with:

// tooltip.component.html
<div class="popup fade"
  [ngClass]="tooltip?.isOpen ? 'show' : ''"
  [style.left.px]="calculatedPos?.left"
  [style.top.px]="calculatedPos?.top">
  {{ tooltip?.text }}
</div>

// tooltip.component.ts
export class TooltipComponent {
  public tooltip: any;
  public calculatedPos: TooltipPosition = {
    left: 0,
    top: 0
  }

  constructor(private store: Store<any>, private ref: ElementRef) {
    this.store.subscribe((state) => this.render(state));
  }

  render () {
    let targetRect = this.tooltip.targetEl 
          && this.tooltip.targetEl.nativeElement
          && this.tooltip.targetEl.nativeElement.getBoundingClientRect()
          || null;
    let tooltipRect = this.ref 
          && this.ref.nativeElement
          && this.ref.nativeElement.getBoundingClientRect()
          || null;
    if (targetRect && tooltipRect) { // <-- tooltipRect.height /.width is zero here!
      switch (this.tooltip.placement) {
        case 'right':
          this.calculatedPos = this.calculatePositionRight(targetRect, tooltipRect, this.tooltip.offset)
          break;
          // and so on...
  }
}

I have experimented with using lifecycle hooks as follows:

ngAfterContentChecked resulted in the same outcome

ngAfterViewChecked produced an expected

ExpressionChangedAfterItHasBeenCheckedError

ngOnChanges did not trigger when rendering

Hence, I pose the following question: How can I obtain the dimensions of the Component before the content is rendered? Or alternatively, how can I detect the content being rendered and then update the position accordingly?

My initial consideration was to use a timeout to allow the component to render before setting the position (without the user noticing), but I am curious to explore any best practices that may exist.

angular typescript

Answer 1

Answer №1

In order to avoid the issue of

ExpressionChangedAfterItHasBeenCheckedError

, it seems necessary to set up the subscription within the ngAfterViewInit lifecycle hook. By injecting the ChangeDetectorRef and manually invoking detectChanges at the end of your render-Method, you are essentially informing Angular that you understand the consequences of your actions.

Answer 2

In order to avoid the issue of

ExpressionChangedAfterItHasBeenCheckedError

, it seems necessary to set up the subscription within the ngAfterViewInit lifecycle hook. By injecting the ChangeDetectorRef and manually invoking detectChanges at the end of your render-Method, you are essentially informing Angular that you understand the consequences of your actions.

Answer 3

Answer №2

One must wait for an element to be rendered in order to obtain its dimensions.

The dimensions of an element cannot be obtained if it is not present in the DOM.

Utilize ngAfterViewInit to ensure that the view is initialized before obtaining dimensions.

Answer 4

One must wait for an element to be rendered in order to obtain its dimensions.

The dimensions of an element cannot be obtained if it is not present in the DOM.

Utilize ngAfterViewInit to ensure that the view is initialized before obtaining dimensions.

Answer 5

Answer №3

In my code, I initiate a process in ngAfterViewInit and it gets triggered again whenever the resize event occurs. Rather than setting it up in the constructor, I opt to reference a wrapper element in the template.

  <div #componentElement>
    ... content goes here ...
  </div>

Then, in the TypeScript file:

  @ViewChild("componentElement") componentElementRef: ElementRef


  ngAfterViewInit(): void {
    this.render()
  }

  @HostListener("window:resize")
  onResize(): void {
    this.render()
  }

  render () {
    console.log(this.componentElementRef.nativeElement.getBoundingClientRect())
    ... insert your custom code here ...
  }

Answer 6

In my code, I initiate a process in ngAfterViewInit and it gets triggered again whenever the resize event occurs. Rather than setting it up in the constructor, I opt to reference a wrapper element in the template.

  <div #componentElement>
    ... content goes here ...
  </div>

Then, in the TypeScript file:

  @ViewChild("componentElement") componentElementRef: ElementRef


  ngAfterViewInit(): void {
    this.render()
  }

  @HostListener("window:resize")
  onResize(): void {
    this.render()
  }

  render () {
    console.log(this.componentElementRef.nativeElement.getBoundingClientRect())
    ... insert your custom code here ...
  }

What is the best way to retrieve the dimensions of an Angular 5 Component prior to displaying it on the screen?

Answer №1

Answer №2

Answer №3

Similar questions

Transforming XML into Json using HTML string information in angular 8

Create a pipeable stream that does not trigger any events when data is piped

Typescript allows for the creation of a static class that can be accessed without needing to instantiate it

Changing Angular component styles dynamically

The component from the service experienced an error due to the absence of an argument for 'payload'

Encountering a 403 error when attempting to upload files to Google Cloud Storage (GCS) using Signed URLs

Trouble Loading TypeScript Class in Cast Situation

Transform the process.env into <any> type using TypeScript

Having trouble accessing a variable from the material theme in Angular 7

What are the steps for creating a custom repository with TypeORM (MongoDB) in NestJS?

Utilizing Angular to Fetch JSON Data from a Server

What is the reason behind angular 4.3's httpclient returning Object instead of any?

Display the content of an md-dialog with a scroll bar

I need a way to call a function in my Typescript code that will update the total value

The current issue I am facing is that the option disabled with value="null" selected is not being shown on the screen. Instead, it should display as "Choose User Types"

Angular users should be cautious of the 'grid zero width' warning that may arise when employing ag-Grid's sizeColumnsToFit() on multiple ag-Grids simultaneously

Using the Angular KeyValue pipe in a Material table to showcase arrays of objects

Issue with interceptor functionality in Angular version 18.0.5 causing it to not work properly

The hide function of the NgxSpinner does not seem to be working properly

Detecting changes in Angular from the parent to the child component can be accomplished by utilizing a specific approach