Open priti-vyawahare opened 2 years ago
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.
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); }
); }`
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">