CODEWITHSUNDEEP
typescriptresize-observer
UzielGom
UzielGom

Reputation: 1

resizeObserver is not activated when changing between pages

my problem is than I am using resizeObserver to detect when a table changes its size and execute a function, it works correctly when reloading the page, but if you change the page and go back to the previous one, resizeObserver stops working typescript code

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

HTML element

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

Upvotes: 0

Views: 945

Answers (1)

H3AR7B3A7
H3AR7B3A7

Reputation: 5261

I think ngOnInit isn't called again, instead of referencing the element by id you can use the resize event in your template.

In your template:

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

Because you are calling onResize, you don't need to put any logic for it in 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)
  }
}

Here is an example on Stackblitz.

For information on how to use the ResizeObserver you can check this GitHub page.

Upvotes: 0

Related Questions