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: