Skip to content

Custom templates for lightbox

Murhaf Sousli edited this page Jul 13, 2023 · 1 revision

The usage is similar to usage of custom templates in the gallery, however, we need to get a reference to the template and pass it to the gallery config.

Example:

@Component({ ... })
export class LightboxExampleComponent {
  // Reference to the image template
  @ViewChild(GalleryImageDef, { static: true }) imageDef: GalleryImageDef;

  constructor(public gallery: Gallery) {
  }

  ngOnInit() {
    this.gallery.ref('lightbox', {
      imageTemplate: this.imageDef.templateRef
    }).load(this.items);
  }
}

in the template:

<div *galleryImageDef="let item">
  {{ item.alt }}
</div>

The templates can also be set using galleryRef.setConfig() as needed

this.galleryRef.setConfig({
  thumbTemplate: this.thumbDef.templateRef,
  boxTemplate: this.boxDef.templateRef
});