``If you're looking to integrate a 360-degree product viewer into your Angular application, here is a

I am in need of showcasing a 360 Product viewer consisting of an array of 36 car images in base64 format. Despite attempting to utilize the angular-three-sixty Package by @mediaman, I was only met with an empty canvas. Does anyone have experience in implementing rotating product galleries in Angular?

My familiarity with Angular is fairly recent. While I am open to a jQuery-based solution, I am unsure of how to integrate jQuery into Angular as it's new territory for me.

Thus far, I have installed the package, imported it into my shared module, and used it as follows:

TypeScript:

imageToShow: string[] = [
0: "data:image/png;charset=utf-8;base64, iVBORw0KGgoA..."
1: "data:image/png;charset=utf-8;base64, iVBORw0KGgoA..."
2: "data:image/png;charset=utf-8;base64, iVBORw0KGgoA..."
3: "data:image/png;charset=utf-8;base64, iVBORw0KGgoA..."
...
];

HTML:

<mm-three-sixty [width]="1280"
            [height]="720"
            [angles]="36"
            [anglesPerImage]="6"
            [images]="imageToShow"
            [preload]="true">
</mm-three-sixty>

An issue has been raised on GitHub regarding the model. I attempted the suggested version as well, yet encountered the same result.

The console consistently displays this error message:

ERROR TypeError: Cannot read property 'nativeElement' of undefined at ThreeSixtyComponent.ngOnInit (angular-three-sixty.js:62)

Currently, the canvas remains empty:

https://i.stack.imgur.com/A7gpQ.png

EDIT:

A helpful comment from Michael D assisted in resolving the error. The image is now visible and draggable. However, it appears to overlay each new image instead of overwriting the previously displayed one when dragged. Here is a visual representation:

https://i.stack.imgur.com/u3Zp0.png

Answer №1

Seems like the issue you're facing is due to a lack of reference to JQuery in your project.

To resolve this, you will need to install it by running npm install jquery.

After that, make sure to include it as a compile time script in the angular.json file.

 ...
  "scripts": []
 ...

You can find a helpful solution on how to do this in the following thread: How to use jQuery with Angular?

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

Is there a way to efficiently execute an API function for every element within an array in a sequential manner?

I am currently facing a challenging problem while working with Angular and RxJs. I have an array containing several IDs: ids = [1,2,3,4] There is an API that can be called with a specific ID parameter to delete the corresponding item from the database: th ...

Testing Angular 2 components with material icons and images

Recently, I finished creating a unique component that showcases an image, material icons, and a custom directive known as ticker. This directive allows for scrolling text if it exceeds the width of the element. https://i.stack.imgur.com/GpDSr.png My next ...

Leverage the power of RXJS to combine the results from two observables

I want to extract parameters from the URL and use those values to trigger an observable. Once a result is returned, I would like to proceed with that and initiate another observable call. My goal is to wrap both calls so I only need to subscribe once to re ...

Access denied: Unable to rename directory '/usr/local/lib/node_modules/expo-cli' due to permission restrictions

After encountering an error that appeared to be related to permissions, I spent some time troubleshooting and finally found a solution. I wanted to share it here in case it can help others facing the same issue. If anyone has alternative solutions, please ...

Is there a way to temporarily pause HTTP calls?

Looking for a solution to this problem I'm facing with the code below: while (this.fastaSample.length > 0) { this.datainputService .saveToMongoDB(this.fastaSample.slice(0, batch)) .subscribe(); } The issue is that I can't send all ...

Error: Unable to locate module - The specified file cannot be resolved when utilizing an external JavaScript library

I am currently integrating a WYSIWYG editor (TUI Editor) into my Angular2+ application. Since there is no official Angular wrapper available, I have decided to create my own based on an existing wrapper. Due to some installation issues with npm, I saved t ...

Alerts appear immediately upon beginning to type, asking for 8 characters and ensuring both passwords match

Is it possible to notify users that both passwords should match and they need to enter at least 8 characters after typing? There is currently an issue where a notification appears for entering less than 8 characters, but the password reset still proceeds ...

Can you explain the concept of server-side rendering with Angular 2?

I've heard that angular2 is utilized for server-side rendering, and I'm curious to learn more about it. Here are some questions I have regarding this concept: 1. What exactly is server-side rendering? 2. What issues does it address? 3. What a ...

Interacting with a form input by triggering the onChange event

I am encountering a problem where I need to be able to select a radio button both onChange via keydown and mouse click. However, I am struggling with accessing both event parameters of the on keydown and on mouse click within the same function. As a result ...

Leveraging Angular Firebase MatTable with the power of 2 observables in 1

I'm currently facing an issue with my Firebase database data structure where I have a reference to a user id. Here's an example of the original data in my collection: { city: new york, country: usa addedBy: feibf78UYV3e43 // This is the USER ID ...

"Customizing the properties of an Angular Material mat-slide-toggle: A step-by-step

<mat-slide-toggle>Slide Me!</mat-slide-toggle> https://i.stack.imgur.com/p1hzD.png https://i.stack.imgur.com/aCzs1.png Is it possible to customize the toggle-thumb-icon to increase its length and position it at the end of the bar? ...

Angular 13: A guide on pulling data from an Excel spreadsheet

I have been encountering issues while trying to display data from a CSV file on a web platform using Angular 13. The errors I am facing are related to binding 'ngModel' and type mismatches in the code. errors Error: src/app/app.component.html:24 ...

Error encountered in Snap SVG combined with Typescript and Webpack: "Encountered the error 'Cannot read property 'on' of undefined'"

I am currently working on an Angular 4 app that utilizes Snap SVG, but I keep encountering the frustrating webpack issue "Cannot read property 'on' of undefined". One solution I found is to use snapsvg-cjs, however, this means losing out on the ...

Lists are not limited to only <li> elements and elements that support scripts (<script> and <template>)

While testing my webpage's accessibility in Google Chrome Lighthouse, I encountered the following error. I am aware of the significance of properly structured lists in enhancing webpage accessibility. It is perplexing for me to receive this error desp ...

Express API functions properly with curl commands, however, it encounters issues when accessed through

I utilized a guide from to develop a MEAN application The express API functions properly using curl and effectively populates the mongo database. Similarly, my angular front end operates smoothly in a live browser environment utilizing nginx as the serve ...

Is it possible to utilize terms such as 'calc' within the [style.width] directive?

Can I incorporate my variable into calc() within the [style.width] directive in angular? For example: <div [style.width.px]="calc(100% - myWidth)">some texts </div> ...

Integrate a JS file into my Angular 4 project

For one of my components, I am looking to implement a specific effect: https://codepen.io/linrock/pen/Amdhr Initially, I attempted to convert the JavaScript code to TypeScript, but faced challenges. Eventually, I decided to directly copy the JS file from ...

Is it possible for NodeJS to redirect to an Angular5 route and return JSON instead of a webpage?

When using the API, I'm attempting to redirect a user if it is detected that they are no longer logged in. For example, if a user initiates an action (PUT) to the api, the API verifies the user's status. If the user is logged in, the action is ca ...

Should Angular libraries be developed using Typescript or transpiled into JavaScript?

Currently, I am in the process of developing a library that will be available as an Angular module through npm. The library itself has been written using typescript. Everything was functioning perfectly up until Angular version 5.0.0, but after this update ...

When using npm link, it searches for the module in the src directory rather than the dist directory

In my experience with Angular CLI Builder, I have implemented a custom builder to extend the asset configuration in angular.json for libraries that have their own assets. To manage my workspace, I utilized nrwl. I created an Angular CLI builder library an ...