The resizeObserver feature remains inactive when transitioning between different pages

Question

The resizeObserver feature remains inactive when transitioning between different pages

I encountered an issue with using resizeObserver to detect when a table changes its size and execute a function. It works correctly when the page is reloaded, but if you navigate away from the page and then go back, the resizeObserver stops working. This is my TypeScript code:

ngOnInit() {
  let elem = document.getElementById('table')
  let resizeObserver = new ResizeObserver(() => {
    console.log('table size changed')
  });
  resizeObserver.observe(elem);
}

This is the HTML element I am referring to:

<ngx-datatable
  id="table">
  ... 
</ngxdatatable>

typescript resize-observer

Answer 1

Answer №1

It seems that the ngOnInit function is not being called again. Instead of using the element's id for reference, you can utilize the resize event in your template.

Incorporate the following code snippet into your template:

<ngx-datatable waResizeBox="content-box" (waResizeObserver)="onResize($event)">
  <!-- ... -->
</ngx-datatable>

By invoking the onResize function, there is no need to include any logic related to it within the ngOnInit:

export class AppComponent  {
  width: number = 0;
  height: number = 0;
  domRectReadOnly: DOMRectReadOnly | undefined;

  onResize(entry: ResizeObserverEntry[]) {
    this.width = entry[0].contentRect.width
    this.height = entry[0].contentRect.height;
    this.domRectReadOnly = entry[0].contentRect;

    console.log('Table size changed !!!')
    console.log('WIDTH: '+ this.width +', HEIGHTH: ' + this.height)
  }
}

An example demonstrating this concept can be found on Stackblitz.

To learn more about utilizing the ResizeObserver, refer to the documentation available on this GitHub page.

Answer 2

It seems that the ngOnInit function is not being called again. Instead of using the element's id for reference, you can utilize the resize event in your template.

Incorporate the following code snippet into your template:

<ngx-datatable waResizeBox="content-box" (waResizeObserver)="onResize($event)">
  <!-- ... -->
</ngx-datatable>

By invoking the onResize function, there is no need to include any logic related to it within the ngOnInit:

export class AppComponent  {
  width: number = 0;
  height: number = 0;
  domRectReadOnly: DOMRectReadOnly | undefined;

  onResize(entry: ResizeObserverEntry[]) {
    this.width = entry[0].contentRect.width
    this.height = entry[0].contentRect.height;
    this.domRectReadOnly = entry[0].contentRect;

    console.log('Table size changed !!!')
    console.log('WIDTH: '+ this.width +', HEIGHTH: ' + this.height)
  }
}

An example demonstrating this concept can be found on Stackblitz.

To learn more about utilizing the ResizeObserver, refer to the documentation available on this GitHub page.

The resizeObserver feature remains inactive when transitioning between different pages

Answer №1

Similar questions

Error in compiling versions of angular/cli and TypeScript

How can I use TypeScript to copy data from the clipboard with a button click?

Angular: Unable to retrieve defined data when loading a component

Encountering an issue with subscribing wait times

Construct an outdated angular project from scratch

Storing Global Types in Angular: A Better Approach

Could it be possible for TypeScript inference to directly infer the value and omit the key in the process?

Immutable parameter in constructor

Tips for effectively managing index positions within a dual ngFor loop in Angular

Require a property to be mandatory depending on the value of another property within a generic interface

What is the necessity behind keeping makeStyles and createStyles separate in Material UI with TypeScript?

Using ArrayBuffer Images in Angular can cause a decrease in the application's speed

Creating a custom data type using values from a plain object: A step-by-step guide

React enforces a restriction on importing types from external directories when using TypeScript in the project

Unlock Buffer - JavaScript

Typescript encountered an error while attempting to generate an AptosAccount due to an authentication key issue (INVALID

What is the method for throwing errors with NestJS guards without relying on an authentication module?

Encountering the "encoding" Module Error when Implementing Nextjs-13 with Supabase

Converting Mesh to Object3D: A step-by-step guide

Unable to assign user roles in next-auth due to the absence of matching modifiers for user