MurhafSousli / ngx-gallery

Angular Gallery, Carousel and Lightbox
https://ngx-gallery.netlify.app/
MIT License
608 stars 128 forks source link

Allow custom template from scratch #125

Closed ayazhussein closed 6 years ago

ayazhussein commented 6 years ago

Hello, Since 3.0.0, is there a way to pass an observable as src image since I have to generate signedUrl from the API, before we could've implement custom image component and it worked.

Open to suggestions :D

MurhafSousli commented 6 years ago

@ayazhussein It is possible in 3.0.1

this.items = [
   new CustomItem({ 
      src: of(item.srcUrl), 
      thumb: item.previewUrl
   })
];

export class CustomItem implements GalleryItem {

  readonly type = 'custom-item';
  readonly data: any;

  constructor(data: any) {
    this.data = data;
  }
}
<gallery [items]="items" [itemTemplate]="itemTemplate"></gallery>

<ng-template #itemTemplate
             let-index="index"
             let-type="type"
             let-data="data"
             let-currIndex="currIndex">

  <!-- Use custom template or component -->
  <my-custom-gallery-item [src]="data.src"></my-custom-gallery-item>

</ng-template>

Check this stackbltiz