Angular Error: Cannot call function panDelta on this.panZoomAPI

Check out my small demonstration using a stackblitz, I'm having an issue.

In the setup, there's a master component with pan-zoom functionality containing a parent component with children content. The library in use is ngx-panzoom.

The default change detection strategy seems to be functioning well, however, in a real-life scenario, I had to manually call cdr.detectChanges() at the end of ngAfterViewInit.

In the stackblitz example, leaving the ChangeDetectionStrategy as default appears to work. But when attempting manual change detection (using the private detectChanges function), the set panZoomAPI ends up being null or undefined rather than the actual API.

This leads to issues with the resetPanZoom function which requires the API to calculate the width and center the content properly.

Any thoughts on why my api is becoming undefined upon triggering manual change detection?

angulartypescriptangular2-changedetectionpanzoom

Answer №1

If you verify the values personally, panzoomConfig.api will initially emit a value in which each entry is null.

The subsequent emitted value consists of all the desired functions. It is advisable to disregard the initial emission.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Currently, I am working on developing a to-do task manager using Angular 2. One of the tasks I am tackling involves updating the value

I'm facing an issue with managing to-do tasks. I would like to update the value of an option in a select dropdown when the (change) event is triggered. There are 2 components: //app.component.ts //array object this.dataArr[this.counter] = {id: this ...

javascripttypescriptangular

What is the best way to transpile TypeScript within the Astro framework?

Recently, I decided to dive into exploring Astro for a couple of upcoming projects. In my research, I delved into the script and typescript sections of the documentation (), as well as (). However, I found the workflow somewhat counterintuitive and struggl ...

typescriptastrojs

The HTTP request fails to accept the input value provided

Visual Representation of File Structure https://i.sstatic.net/6nscS.png export class FaqService { public inputValue; constructor(private http: Http) {} ngOnInit() {} setData(val) { this.inputValue = val; console.log(this.inputValue); } getData() ...

angularapihttp

Encountered an error while attempting to upgrade to the latest @angular/cli version 1.0.0: Unexpected symbol "<" found in JSON at the beginning of the file

When I was using angular-cli 1.0.0 beta 23, my service was able to fetch a local JSON file for testing without any issues. However, after upgrading to angular/cli 1.0.0, I encountered the following problem: GET http://localhost:4200/json/inputInventory/ ...

angular

Understanding vulnerabilities in Angular and implementing effective solutions to address them

click here to view the image Hello everyone, I encountered an error message while attempting to install Bootstrap in my project using the code npm install --saved bootstrap. Can anyone provide assistance in simpler terms? ...

angularnpmangular-ui-bootstrapangular-ng

What makes components declared with "customElements.define()" limited in their global usability?

I've been tackling a project in Svelte, but it involves some web components. The current hurdle I'm facing is with web components defined using the customElements.define() function in Typescript, as they are not accessible unless specifically im ...

javascripttypescriptsvelteweb-component

Configuring dependencies in Ionic2 and Angular2 for seamless integration

I need to configure a global configuration file or from app.ts. We want to pass configuration settings that can be automatically used in our dependency injection system. Service for Api.ts import {Injectable} from 'angular2/core'; import {Http ...

angularjsdependency-injectionionic-frameworkangularionic2

Getting a blank request body error while receiving data from an Angular 4 application in Express

My express route is indicating that the body of the request being sent is empty, according to req.body. The main node file looks like this - var express = require('express'); var bluebird = require('bluebird') const bodyParser = requ ...

javascriptangularjsnode.jsangularexpress

Having trouble updating the value in the toolbar?

Here is an example that I added below: When I click the add button, the value of the "newarray" variable is updated but not reflected. I am unsure how to resolve this issue. This function is used to add new objects: export class AppComponent { ne ...

htmlangulartypescript

The issue with IONIC/Angular lies in its inability to properly render the JSON data retrieved

I have recently started learning IONIC/Angular and Javascript, although I do have some background in other programming languages. The issue I'm currently facing is related to fetching JSON data from an external API (I've created the API with Stra ...

angulartypescriptionic-framework

Can all objects within an interface be iterated through in order to retrieve both the key and its corresponding value?

I have created an interface that is capable of accepting a variety of search criteria and then passing it to a service that will incorporate those values into the service URL. I am wondering if there is a way to iterate through all the objects in the inter ...

typescriptangular

Before fetching the data from firebase in Angular 2, it is crucial to ensure that the code is properly

I'm facing an issue when trying to retrieve data from Firebase. It successfully retrieves the data, but it takes a few seconds to do so. In the meantime, the code continues running and the variable's value becomes null. Why is this happening? Is ...

multithreadingangularfirebasefirebase-realtime-database

Avoiding hydration errors when using localStorage with Next.js

Want to save a token and access it using local storage The code snippet I am using is: if (typeof window !== 'undefined') { localStorage.setItem(key, value) } If I remove the window type check, I encounter this error: localStorage is not ...

reactjstypescriptnext.js

Tips for preventing a wrapped union type from collapsing

It seems like there is an issue with Typescript collapsing a wrapped union type when it knows the initial value, which is not what I want. I'm uncertain if this is a bug or intended behavior, so I'm curious if there's a way to work around it ...

typescriptunion-types

Problem with rendering React Router v4 ConnectedRouter on nested routes

The routes for the first level are correctly displayed from Layout.tsx, but when clicked on ResourcesUI.tsx, the content is not rendered as expected (see code below). The ResourceUI component consists of 2 sections. The left section contains links, and th ...

reactjstypescriptreact-routerreact-redux

Encountering problem with ngx material timepicker field within a mat dialog

When utilizing the ngx material timepicker field in a mat dialog, I am encountering an issue where the data is correctly mapped to the form group and the time displays properly when opening the clock view. However, the time does not display correctly on th ...

angular

Issue with Typescript Conditional Type not being functional in a function parameter

For a specific use-case, I am looking to conditionally add a key to an interface. In attempting to achieve this, I used the following code: key: a extends b ? keyValue : never However, this approach breaks when a is generic and also necessitates explicit ...

typescript

Encountering obstacles when attempting to initiate a node application due to an error

Upon starting my node application, I encountered an error. The error message reads: "ERROR in Metadata version mismatch for module ../node_modules/@ng-bootstrap/ng-bootstrap/index.d.ts, found version 4, expected 3" Here is the full error trace: ERROR ...

node.jsangularnpm

Mapping JSON objects to TypeScript Class Objects

I am in the process of transitioning my AngularJS application to Angular 6, and I'm encountering difficulties converting a JSON object into a TypeScript object list. In my Angular 6 application, I utilize this.http.get(Url) to retrieve data from an AP ...

typescriptangular6

Navigating to the tsconfig.json file based on the location of the file being linted

In my monorepo, each package currently contains a .eslintrc.cjs file with the following setup: Package-specific ESLint Configuration const path = require('path') const ts = require('typescript') const OFF = 0 const WARN = 1 const ERROR ...

typescripteslinttypescript-eslint