Angular: ERROR TypeError: this.panZoomAPI.panDelta is not a function

Question

I have made a small ->stackblitz <- to demonstrate my issue.

I have a master component that has pan-zoom within which there's a parent component that holds some content (the children). The library being used is ngx-panzoom.

Using the default change detection strategy seems to be working fine although in my actual, real-life case I had do to a manual cdr.detectChanges() at the very end of my ngAfterViewInit function.

In the stackblitz example I have left ChangeDetectionStrategy to default and it looks like it's working. The moment I try to trigger a manual change detection (via the private detectChanges function) the part where setting the panZoomAPI receives null/undefined instead of the actual api.

This later on breaks the resetPanZoom function which tries to calculate the width of the content and center it so it looks nice.

Any ideas why my api is undefined if I trigger manual change detection?

Answer 1

You can check the values yourself, panzoomConfig.api first emits a value where every entry is null.

The second value emited contains all the functions you are looking for. You should likely skip that first value.

this.panzoomConfig.api.pipe(takeUntil(this.ngUnsubscribe), skip(1))