Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
priti-vyawahare opened this issue Sep 2, 2021 · 1 comment

Comments

@priti-vyawahare
Copy link

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
Copy link
Owner

marcj commented Sep 2, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants