Integrating UniteGalley with Angular2

[Usman Chaudhri]

I am trying to integrate UniteGallery (https://github.com/vvvmax/unitegallery/) with Angular2. Below is the code notice the <img> tag has "data-image" tag which UniteGallery uses to display images:

For some reason my angular2 binding {{image.url}} is not working and errors out with "cannot bind with data-image".

<div id="image-gallery" style="display:none;">

<img *ngFor="let image of images?.data" 

alt="Image 1 Title" 

src="{{image.url}}"

        data-image={{image.url}}

data-description="{{image.description}}">                            

</div>

<script>

jQuery("#image-gallery").unitegallery({

gallery_theme: "tilesgrid",

tile_enable_icons:false,

tile_width: 114,

tile_height: 100,

tile_enable_border:false,

grid_num_rows:10000,

grid_space_between_cols: 10,

});

</script>

Is there a responsive Image and Video gallery out there which works with Angular2 ?

Any clue will help. thanks much.

[Sander Elias]

Hi Usman,

Use ng-src instead of src. This will make this work. (it prevents your plugin from reading the src before it's changed by angular 1.x.

Regards

Sander

[Usman Chaudhri]

Hi Sander - thanks for the reply i tried ng-src but it does not seem to work. We are facing loads of issues integrating third party gallery with Angular2 hence i think we most probably go with building our own in Angular2.

[Sander Elias]

Hi Usman,

Oh, you don't use angular 1. On Angular you need to use bindings for that, like this:

<div id="image-gallery" style="display:none;">
 <img *ngFor="let image of images?.data"
     alt="Image 1 Title"

     [src]="image.url"
     [data-image]="image.url"
     [data-description]="image.description">                            
</div>

(doing this out the top of my head, not entirely sure out the '-' in the attribute names. perhaps that needs some special attention.)

Regards

Sander