ResizeSensor stops observing the changes if the element gets hidden and shown again using angular *ngIf

[priti-vyawahare]

I am using angular 11. I use ResizeSensor like below ` export function resized(element: HTMLElement): Observable<{ width: number; height: number }> { let resizeSensor: ResizeSensor | undefined; let handlers: NodeEventHandler[] = [];

const onResize = (size: { width: number; height: number }) => { handlers.forEach(handler => handler(size)); };

return fromEventPattern( handler => { if (!resizeSensor) { resizeSensor = new ResizeSensor(element, onResize); }

  handlers.push(handler);
},
handler => {
  handlers = handlers.filter(activeHandler => activeHandler !== handler);

  if (!handlers.length && resizeSensor) {
    resizeSensor.detach();
    resizeSensor = undefined;
  }
},

); }`

And in my ngAfterViewInit I use this func like this

this.viewChanges$ = resized(this.elementRef.nativeElement) .pipe( pluck('width'), tap((newWidth: number) => { // my code }), );

When this component gets hidden and shown again using the *ngIf directive, suddenly the observer stops emitting values. <ng-container *ngIf="show"> <componentusingcss-element-queries><componentusingcss-element-queries> </ng-container>

Is there something like if the element being observed by this library is hidden using ngIf, and shown again, it will stop observing?

[marcj]

When angular hides something via ngIf it removes it from the DOM. When it's visible again, it create a new DOM node. With that DOM removal, it removes also the nodes from the Resizer. You have to create new resizer for each new DOM node. In the ElementQueries implementation we use a animationstart trick to automatically find newly added nodes to the DOM: see https://github.com/marcj/css-element-queries/blob/master/src/ElementQueries.js#L399-L427. This mechanism is not available in the resizer.