0

I need to display an array of 36 Images (base64) of a car as a 360 Product viewer. I tried my luck with the angular-three-sixty Package by @mediaman, but only got an empty canvas. Does someone have any experience with rotating product galleries in angular?

I just recently started working with Angular. If there is like a jQuery based solution, i wouldn't mind, but i never used jQuery in Angular and i'm not sure how i would implement a jQuery based solution.

So far i installed the package, imported it in my shared module and used it like so:

TS:

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>

there is an issue on github about the model. i tried this version aswell, but the result was the same.

in the console i always get this error:

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

This is the empty canvas:

empty canvas highlighted with dev-tools

EDIT:

The comment from Michael D helped getting the error away. The Image is now there and dragable. Unfortunately it doesn't seem to overwrite the image currently displayed, but overlays every new one, when dragged. here is a picture:

enter image description here

SteelNation
  • 216
  • 1
  • 10
  • 1
    It seems the component is trying to access the template reference variable `canvasElement` in the [`ngOnInit()`](https://github.com/mediamanDE/angular-three-sixty/blob/master/src/three-sixty.component.ts#L98) hook. This might be too early for the canvas to be rendered. It should be `ngAfterViewInit()` hook instead. – ruth Jun 24 '21 at 07:38
  • how should i change that? according to the usage guide, i only need the html part and an array. i can tell the html to wait with rendering, until the array is ready, but that doesn't help. the error appears anyway, as soon as the html part renders. – SteelNation Jun 24 '21 at 08:01
  • You might to adapt the source locally and try changing the `ngOnInit()` to `ngAfterViewInit()`. In this case don't forget to adhere to the module license and provide credit where it's due. – ruth Jun 24 '21 at 09:09
  • Thanks for the input, the error is now gone. I added an edit to my question, because something weird is going on. – SteelNation Jun 24 '21 at 10:58
  • Hi. Did anyone solve this problem..? – liron Dec 06 '21 at 07:00
  • i wasn't able to refresh the image everytime an angle changes. i added a background to the picture. now it doesn't matter, that the new picture is beeing overlayed – SteelNation Dec 15 '21 at 14:44

1 Answers1

0

Looks like your problem is not having a reference to JQuery in your project.

You will probably need to install it using npm install jquery.

Once you've done this you'll need to include it as a compile time script in the angular.json.

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

Good answer on how to do that in this thread: How to use jQuery with Angular?

Terrance00
  • 1,658
  • 1
  • 20
  • 29